如何更改選擇標簽上的向下箭頭

Question

如何更改選擇標簽上的向下箭頭？ 例子：

現在的樣子：

我希望它如何：

我怎樣才能做到這一點？

Answer 1

您可以使用純 css 嘗試此操作，首先您需要刪除具有appearance:none的select標記的默認行為appearance:none屬性。

瀏覽器指定

• 外觀：無；

• -webkit 外觀：無； /* chrome and safari */

• -moz-外觀：無； /* Mozilla */

• -ms-外觀：無； /* Internet explorer */

  然后你可以設置background-image

 select { width:100px; float:left; appearance:none; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; border:2px solid #000; background:url('http://www.free-icons-download.net/images/small-down-arrow-icon-15593.png'); background-repeat:no-repeat; background-size:16px 17px; background-position:right 0px; }

 <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select>

Answer 2

這是另一種簡單的 SVG 方法，無需外部圖像：

select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 24px; 
  background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') 100% 50% no-repeat #fff; } /* change or remove #fff color if not needed */

Answer 3

我認為最好讓瀏覽器選擇如何顯示列表。 為什么要強迫用戶改變他的習慣？

否則如何在沒有 JavaScript 的情況下僅使用 CSS 設置 <select> 下拉列表的樣式？