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

Add this style to your

.styled-select {
   background: url(new_arrow.png) no-repeat right #fff;
}

Source: http://bavotasan.com/2011/style-select-box-using-only-css/

Answer 2

Style it with CSS and use pointer events :

<label>
<select>
   <option value="0">Zero</option>
   <option value="1">One</option>
</select>
</label>

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/