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

扫描下面的二维码，“关注”我的百家号。

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

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

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

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

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