How do you replace the arrow button on <select> element with css?

Question

Trying to style the select element on a form with an image for the dropdown arrow. Dont know if this is possible yet.

Answer 1

Style it with CSS and use pointer events :

   Zero
   One

and the relative CSS is

label:after {
    content:'\25BC';
    display:inline-block;
    color:#000;
    background-color:#fff;
    margin-left:-17px;   /* remove the damn :after space */
    pointer-events:none; /* let the click pass trough */
}

use a block with image background if you want to, I'm just using a down arrow here. Here is a ugly fiddle sample: https://jsfiddle.net/1rofzz89/