在火狐和谷歌浏览器里面,会出现有些样式不兼容的情况,所以为了界面美观,或多或少都要写一些兼容的代码,今天写一个在火狐浏览器里面,select下拉框样式兼容。
在谷歌浏览器,样式是这样的:
当时在火狐浏览器,右侧会有比较难看的小箭头:
这个时候,需要对火狐浏览器里面的select进行一些兼容的操作,需要在全局的css里面添加这一段代码。
/* 火狐浏览器 */
select {
-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;
}
添加完成之后就ok了。
原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。