通过css属性hack完成select样式美化,并兼容IE
最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8。
经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack;
在chrome和FF下隐藏默认样式,显示css自定义样式,在ie下隐藏自定义样式,显示默认样式。
DOM代码如下:
<select name=""> <option value=""></option> </select>
CSS样式如下:
select{ width: 100px; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url("drag.png"); background-position: right center; padding-right: 0 \9; background: none \9; }
喜欢请点击右下角推荐,转载请标明出处。