各浏览器版本下select及其它小样式修改

最新推荐文章于 2024-09-10 13:54:44 发布

原创最新推荐文章于 2024-09-10 13:54:44 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

ie8-9 同时被 2 个专栏收录

1 篇文章

订阅专栏

select样式修改

1 篇文章

订阅专栏

本文介绍了一种在IE8/9浏览器中实现Select下拉框样式的兼容性解决方案，利用外部div覆盖的方式，解决了appearance属性不被支持的问题。

select{
     padding-left:8px; color:#333;
     appearance:none !important;
    -moz-appearance:none !important;
    -webkit-appearance:none !important;
    -ms-appearance:none !important;
    /*直接做一个类似下图的select样式*/
    background: url(../images/selectbg.png) no-repeat  100% 100% !important;  

}


![select背景图片](https://img-blog.youkuaiyun.com/20161128151618329)

旧版IE多用此方法。但是因为 IE8/9并不支持 appearance:none CSS属性。而这一点坑了我不少时间因为大部分select样式改变都是通过修改其背景。所以在ie8/9以下需要另一种解决方案

在select外层生成一个div 使其彻底覆盖。就可以了