设置html选择菜单的样式

Question

i am trying to change the icon of a html select menu using fontawesome icon fonts. My code is as follows

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

my css is

select {
    position: relative;
}
 select:after {
    font-family: 'FontAwesome';
    content: '\F150';
    position: absolute;
    color: black;
}

here is the demo

how do i do this? could someone please help me..

Answer 1

It has something to do with how browsers render select.

You need to put a label for the select, then put your css after the label

<select id="select-1" name="select-1"> ... </select> <label for="select-1"></label>

then in css

#select-1 + label:after { styling }

http://jsfiddle.net/YdQka/9/