CSS Custom Dropdown Select that works across all browsers IE7+ FF Webkit

Question

I would like to make a custom dropdown that works across all the browsers. I created one here but the arrow is not clickable. If I set it as the background for the select, t

Answer 1

The pointer-events could be useful for this problem as you would be able to put a div over the arrow button, but still be able to click the arrow button.

The pointer-events css makes it possible to click through a div.

This approach will not work for IE versions older than IE11, however. You could something working in IE8 and IE9 if the element you put on top of the arrow button is an SVG element, but it will be more complicated to style the button the way you want proceeding like this.

Here a Js fiddle example: http://jsfiddle.net/e7qnqzx6/2/