如何在不同瀏覽器中自訂選擇輸入中的箭頭樣式？

自訂選擇輸入中的箭頭樣式

目前的任務是將選擇輸入中的預設箭頭影像替換為自訂圖片。然而，實現此自訂的努力僅在 Chrome 中取得了成功。

提供的 HTML 和 CSS 程式碼涉及建立一個與選擇輸入具有相同尺寸的 div 元素並將其背景設為透明。所需箭頭的圖像作為背景包含在 div 的右上角。

不幸的是，Firefox 和 IE9 顯示原始箭頭而不是自訂影像。若要解決此問題，請考慮利用下列 CSS 修改：

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

此程式碼在套用於 select 元素時，會刪除瀏覽器的預設樣式，包括箭頭。然而，值得注意的是，Firefox 在版本 35 之前並不完全支援此功能。

另一種方法涉及使用 JavaScript。此 jsfiddle 中示範了一種解決方法：https://jsfiddle.net/b5gu6306/

總之，要自訂選​​擇輸入中的箭頭樣式，請使用建議的 CSS 程式碼修改選擇元素的外觀。對於 35 之前的 Firefox 版本，請考慮實作提供的 JavaScript 解決方法。

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