CSS解决select默认下拉样式

select默认样式在各个浏览器样式不一致,同时也不美观,对于这种小的样式,我觉得用CSS解决更加方便简单,下面将介绍我学习的方法。(听说可以用JS插件或者什么解决,后面再继续探索)

html结构:

CSS解决select默认下拉样式_第1张图片

基础样式,设置边框,ps:firefox 下默认边框样式需要复写

CSS解决select默认下拉样式_第2张图片

将默认的select选择框样式清除:利用CSS3 appearance 属性;所有主流浏览器都不支持 appearance 属性。Firefox 支持替代的 -moz-appearance 属性。Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

CSS解决select默认下拉样式_第3张图片

清楚IE的默认样式,IE10+有效:

添加我们自己想要的样式:

参数:no-repeat:不平铺;scroll随内容滚动.相对于 fixed不随内容滚动;95%水平,center垂直。

最后的效果如图(截至谷歌浏览器):

你可能感兴趣的:(CSS解决select默认下拉样式)