如何在不同瀏覽器中自訂下拉箭頭的外觀？

覆蓋下拉箭頭的預設外觀

建立下拉清單時，您可能希望在各種瀏覽器中具有一致的外觀和感覺。但是，下拉箭頭的預設外觀可能會因瀏覽器而異。幸運的是，有一些方法可以使用 CSS 修改其外觀。

雖然 CSS 無法直接變更原生箭頭，但它提供了一種解決方法：隱藏預設箭頭並顯示自訂箭頭。這種方法保持了跨瀏覽器的一致性，同時允許個性化樣式。

考慮以下 CSS 和 HTML 程式碼：

.styleSelect select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.styleSelect {
  background: url("images/downArrow.png") no-repeat right #fff;
}

<div class="styleSelect">
  <select class="units">
    <option value="Metres">Metres</option>
    <option value="Feet">Feet</option>
    <option value="Fathoms">Fathoms</option>
  </select>
</div>

在此範例中，我們使用 CSS 隱藏本機箭頭來消除其原始外觀的屬性。然後，我們將自訂背景圖像宣告為向下箭頭，確保跨瀏覽器的外觀一致。

以上是如何在不同瀏覽器中自訂下拉箭頭的外觀？的詳細內容。更多資訊請關注PHP中文網其他相關文章！