html表单 select多选下拉箭头的问题

  开发中碰到 需要使用表单多选标签select，但是需求是自带酷炫的外框，而且下拉箭头不能用原生的。首先是初始化select标签，清除原生的边框样式：border:none;outline-style:none；去掉原生箭头然后模拟箭头{appearance:none;-moz-appearance:none;-webkit-appearance:none;}，一般需要加上前缀，有兼容问题。

然后放上自定义的下拉图标，可以是图片或者背景图，但是背景图必须留下位置 ，以防字体遮住图标：padding-right:14px；最后还有一个问题：如果是定位的一个图片在这里的话，单纯点击这个下拉箭头时，不会出现下拉框。尤其是下拉图标很大时，很多人会不由自主的去点击这个图标，但是因为是模拟的假的图标，所以不会触发下拉事件。此时需要另一个css属性：pointer-events:none.这个属性的用处是：阻止元素成为鼠标事件目标。取消图片的默认事件，这样点击这里就可以弹出下拉框，正常显示了。