阿里云服务器

我们在调试程序的时候,有时候不能改变代码,只能通过js和css来调整前端显示样式

今天给大家分享,如果修改select option的默认样式

2111.JPG

我们首先需要在select里面加入size参数

可以通过js代码来实现,里面ProductSelect-product-template-option-0  为select  的id参数

  <script>
function displayResult(){
  document.getElementById("ProductSelect-product-template-option-0").size=8;
}
</script>
<button style="display:none" type="button" id="test" onclick="displayResult()">ALL  SKU</button>

<script type="text/javascript">
//一秒后模拟点击
	setTimeout(function() {
		// IE
		if(document.all) {
			document.getElementById("test").click();
		}
		// 其它浏览器
		else {
			var e = document.createEvent("MouseEvents");
			e.initEvent("click", true, true);
			document.getElementById("test").dispatchEvent(e);
		}
	}, 1000);
</script>

然后在通过css调整来实现样式

 .selector-wrapper label {
    display: block;
    width: 300px;
    text-align: center;
}           
            
#input_radio {
 margin:10px auto;
}
#input_radio select{ 
 overflow-y: hidden;
    border: none;
    width: 120px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    text-align: center;

}
select option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
  color:#fff;
    -webkit-appearance: none;

}
select option{
 padding:5px 0;
    -webkit-appearance: none;

}
 .selector-wrapper label:after {
    content: '-';
    padding-left: 6px;
   display:none;
}

显示结果如下:

select option样式


热门话题

织梦系统幻灯片怎么修改可以跳转织梦的日志在哪个文件织梦怎么更换编辑器网站平台建设公司外包美工工作清单光之日服务器织梦英语怎么读海洋logo设计思路zblog分类模板wordpress适合大型网站吗织梦师公子颜四川省示范校建设网站腾讯云计时服务器
相关阅读:
  • phpcms v9修改网站域名后,栏目链接无法变过来的问题
  • 宝塔控制面板快速设置404页面的方法
  • 帝国CMS伪静态connect.php(2439) : eval()'d code on line 1错误的解决办法
  • 让百度地图api支持https的方法
  • 网页js自动触发input或者button,复制指定DIV内容的方法
  • 腾讯CDN: 什么是Range回源和配置方法
  • zblog配置腾讯CDN出现HTTP ERROR 564错误的处理办法
  • 鼠标经过图片 缓慢上移实现方法
  • 通过css让DIV实现淡入的动画特效的方法
  • 网页form表单新窗口打开的设置方法