更改select样式,点击div触发select

为了美观,ui小姐姐,坚持要把select做成这种效果,这样的话只能自己编辑了,但是怎么能使点击套上去的图片样式触发select下拉呢?

试了好久都不行

$(".select-bg").on("click",function(){
    $('select').trigger('change')
})

方法就是这样啊,为什么不行呢. 问了好久度娘都没答案, 

最后千辛万苦的找到一个大神说加上这个属性,

pointer-events: none;

当时在想为什么加上这个就可以,这个的作用不就是禁用鼠标点击吗?

后面我明白了,下面就是答案

Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。

如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素。

  浏览器支持

  到目前为止，Firefox 3.6+、Safari 4 和Google Chrome支持Pointer-events。

只需要加上这个就可以了,js可以不要了,因为事件穿过该元素到达下面的元素