标签:html firefox tran 属性 style ref blog color 谷歌
最近项目中遇到了自定义下拉框的默认样式在谷歌,火狐,IE上显示不同的问题。
左侧图片就是重写的样式,下拉框的右侧三角是选用的bootstrap里面的图片,通过绝对定位放过去的。
css:
select { /*Chrome同Firefox与IE里面的右侧三角显示的样式不同*/ border: solid 1px #ddd; /*将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; padding-right: 14px; /*如果要加入自定义图片, 就增加这个属性 background: url或者在html中直接加入图标也行*/ } /*清除iIE的默认选择框样式*/ select::-ms-expand { display: none; }
html:
<select class="form-control leftrange"> <option selected>--请选择--</option> <option>学生</option> <option>老师</option> <option>管理员</option> <option>用户</option> </select> <span class="glyphicon glyphicon-chevron-down selecticon" > </span>
标签:html firefox tran 属性 style ref blog color 谷歌
原文地址:http://www.cnblogs.com/iriliguo/p/7041375.html