設置html選擇菜單的樣式

Question

我正在嘗試使用fontawesome圖標字體來更改html選擇菜單的圖標。 我的代碼如下

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

我的CSS是

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

這是演示

我該怎么做呢？ 有人可以幫我嗎..

Answer 1

它與瀏覽器如何呈現選擇有關。

您需要為選擇貼上標簽，然后在標簽后貼上CSS

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

然后在CSS

#select-1 + label:after { styling }

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