首页>前端教程>CSS教程

select下拉菜单的兼容性问题,支持IE10以上的方法

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

有两种常规方法。

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

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

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

比如:

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

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

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

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

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

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

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

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

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

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

See the Pen select下拉菜单隐藏小箭头写法 by zhaolanzhen (@mrszhao) on CodePen.

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

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

See the Pen select下拉菜单小箭头兼容写法 by zhaolanzhen (@mrszhao) on CodePen.

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

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

点赞


3
保存到:

相关文章

Top