如何从 select 列表中更改箭头图标

Question

我想从我的 select 列表中更改此图标

进入这个图标

我用这种类型的问题尝试了来自stackoverflow的几个代码，但它们不起作用。

Answer 1

您可以使用appearnace: none CSS 属性，带有::after选择器。 您可以在::after使用content属性后使用自定义符号。

 div { position: relative; float: left; min-width: 200px; margin: 50px 33%; } div::after { content: '>'; font: 17px "Consolas", monospace; color: #333; transform: rotate(90deg); right: 15px; top: 18px; padding: 0 0 2px; position: absolute; pointer-events: none; } div select { appearance: none; -moz-appearance: none; -webkit-appearance: none; display: block; width: 100%; max-width: 320px; height: 50px; float: right; margin: 5px 0px; padding: 0px 24px; font-size: 16px; background-color: #ffffff; }

 <div> <label> <select> <option selected> Select Box </option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </label> </div>