首页 > 代码库 > select下拉框的样式在浏览器上的兼容问题
select下拉框的样式在浏览器上的兼容问题
最近项目中遇到了自定义下拉框的默认样式在谷歌,火狐,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>
select下拉框的样式在浏览器上的兼容问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。