如何從 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>