设置html选择菜单的样式

我正在尝试使用图标字体更改html选择菜单的图标。我的代码如下

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

这是

---

我该怎么做？有人能帮帮我吗？

这与浏览器如何呈现选择有关

您需要为select添加一个标签，然后在标签后面添加css

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

---

非常感谢您。。还有一个问题。如何删除默认图标。uhmmmmm。。。我不完全确定。我使用了类似css的标签：{position:relative；left:-1.15em；top:0.12em；background color:#d0d0}，它接近匹配，但确实需要渐变和更紧的高度/宽度来覆盖默认图标。这是一项艰苦的工作。也许有一个库插件可以模拟外面的？

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

#select-1 + label:after { styling }