如何在不同瀏覽器中自訂選擇下拉箭頭？

自訂選擇箭頭樣式

您在修改選擇元素箭頭的外觀並使其在瀏覽器中保持一致時遇到困難。具體來說，您在 Firefox 和 Internet Explorer 9 中遇到問題，箭頭未按預期替換。

要解決此問題，了解底層瀏覽器差異至關重要。 Chrome、Firefox 和 IE9 以不同的方式處理選擇元素箭頭的自訂樣式。

Chrome 和 Safari：
這些瀏覽器對選擇箭頭的外觀樣式提供進階支援。使用 CSS，您可以定義自訂背景圖片並消除預設箭頭。

Firefox：
在版本 35 之前，Firefox 本身不支援更改選擇箭頭的外觀使用CSS。因此，預設箭頭仍然可見。

Internet Explorer 9：
眾所周知，IE9 在選擇元素的樣式方面存在某些限制，包括無法隱藏預設箭頭。

解決方案：**

為了達到您想要的結果，您可以合併特定於瀏覽器的CSS屬性：

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

透過應用這些屬性，您可以指示Firefox 忽略其預設外觀並使用CSS 中定義的自訂樣式。此外，對於 IE9，您可以透過使用背景屬性來利用您自己的影像覆蓋預設箭頭。

注意：
如提供的答案所述，Firefox直到版本 35 本身並不支援自訂選擇箭頭外觀。為了實現舊版相容性，請考慮檢查瀏覽器版本並實作替代解決方案，例如上述 jsfiddle 中建議的解決方案。

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