美文网首页
CSS解决select默认下拉样式

CSS解决select默认下拉样式

作者: 张延伟 | 来源:发表于2016-07-22 13:02 被阅读421次

    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垂直。

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

    相关文章

      网友评论

          本文标题:CSS解决select默认下拉样式

          本文链接:https://www.haomeiwen.com/subject/endijttx.html