遇到问样式兼容问题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;
}