• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > 表单下拉列表菜单select的兼容性问题

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

    作者: 分类:HTML5与CSS3.0 点击: 403 次
    wordpress CMS主题:ssmay主题

      对于表单控件的样式修改一直是个老大难的问题,如果不做大手术,还是很好兼容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的写法了。

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



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

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

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