首页 > HTML5与CSS3.0 > 表单下拉列表菜单select的兼容性问题

表单下拉列表菜单select的兼容性问题

作者: 分类:HTML5与CSS3.0 点击: 3,978 次

    对于表单控件的样式修改一直是个老大难的问题,如果不做大手术,还是很好兼容IE10和谷歌等现代浏览器的。

    有两种常规方法。

    第一种:直接干掉select旁边的小箭头,用图片或者border绘制三角形代替。

    chrome下面需要利用谷歌的私有属性-webkit-appearance完成。这个appearance是IE不支持的,所以真的很讨厌IE。

    结合谷歌的很多私有伪元素选择器,还是可以很好地改变控件的样式。

    比如:

    ::-webkit-textfield-decoration-container       input内部、上下箭头以及填写数值的外部容器

    ::-webkit-inner-spin-button                           就是Chrome上上下下的小小按钮

    隐藏select下拉菜单的小箭头代码只需要写上:

    CSS
    select{
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;/*隐藏下拉箭头,IE不支持此属性*/
    }

    如果需要隐藏小箭头,则需要一个容器结合一个伪元素伪装成一个select,再把真正的select隐藏起来。

    在IE10+以上,隐藏小箭头的代码如下:

    CSS
    /*兼容IE10+,小箭头不可见*/
    .select-wrap select::-ms-expand{
    	display:none;}

    到了IE9,小箭头藏不住了,那么可以让自己绘制的三角形隐藏。

    在html头部加上如下代码,低于IE9版本的隐藏:

    Markup
    <!--[if lte IE 9]>
      <style type="text/css">
        .select-wrap:after{
        display:none;}
      </style>
    <![endif]-->

    如果不想隐藏默认的小箭头,也可以,只不过IE下面只要为select加了border,小箭头上面也有边框背景出现,所以,也需要兼容一下IE。

    第二种方法,使用默认小箭头:

    如果想完美的一致,那就只能用div,ul,li结合js的写法了。

    如果前端少一点兼容性的问题,世界肯定更加和谐,前端开发(不分男女)的发际线就可以保住。



文章作者:hero2018
本文地址:http://wanlimm.com/77201808216641.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

上一篇:
下一篇:

或许你会感兴趣的文章:

一条回应:“表单下拉列表菜单select的兼容性问题”

  1. avatar wangwei1987说道:

    border绘制三角形这个真的很好用。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.