遇到问样式兼容问题1:
问题:火狐浏览器select下拉框选择后会出现一条虚线边框?
解决方法:
@-moz-document url-prefix() { select.form-control { -moz-appearance: none; appearance: none; background-image: url("http://221.228.109.114:8083/manage/more/firefox_select_icon.png"); background-repeat: no-repeat; background-position: calc(100% - 7px) 50%; background-size: 2% auto; border-radius: 3px; padding: 0; } }
问题:火狐浏览器select下拉框右侧的三角形下拉图标样式很丑,不是自己写的样式?
解决办法:
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; }
原文:https://www.cnblogs.com/cristina-guan/p/9447892.html