select默认样式在各个浏览器样式不一致,同时也不美观,对于这种小的样式,我觉得用CSS解决更加方便简单,下面将介绍我学习的方法。(听说可以用JS插件或者什么解决,后面再继续探索)
html结构:
基础样式,设置边框,ps:firefox 下默认边框样式需要复写
将默认的select选择框样式清除:利用CSS3 appearance 属性;所有主流浏览器都不支持 appearance 属性。Firefox 支持替代的 -moz-appearance 属性。Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
清楚IE的默认样式,IE10+有效:
添加我们自己想要的样式:
参数:no-repeat:不平铺;scroll随内容滚动.相对于 fixed不随内容滚动;95%水平,center垂直。
最后的效果如图(截至谷歌浏览器):