如何在不同瀏覽器中可靠地設定選擇選項元素的樣式？

在不同瀏覽器中設定選擇選項元素的樣式

在選擇選單中設定選項元素的樣式可能會帶來挑戰，特別是在IE9 和Chrome 等較舊的瀏覽器中。雖然某些瀏覽器支援使用 CSS 設定這些元素的樣式，但其他瀏覽器可能會有限制。

IE9 和Chrome 中的選項元素樣式問題

提供的程式碼示範了使用類別選擇器的option 元素：

option.red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

但是，在IE9 和Chrome 中，此樣式無法套用於選項的背景顏色。這是因為 WebKit 瀏覽器不完全支援選項元素的樣式（顏色和背景顏色除外）。

跨瀏覽器解決方案

因為並非所有瀏覽器為樣式選擇選項提供一致的支持，更可靠的方法是利用允許全面CSS 自定義的替代HTML 結構。這可以透過用ul（無序列表）和li（列表項目）的組合替換選擇選單來完成：

HTML:

<ul>
    <li>Red</li>
    <li>White</li>
    <li>Blue</li>
    <li>Green</li>
</ul>

CSS:

ul {
    display: flex;
    flex-direction: column;
    padding: 0;
}

li {
    list-style-type: none;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

li:hover {
    background-color: #cc0000;
}

此方法允許對外觀進行完全CSS控制選項，包括背景顏色和其他樣式選項。

以上是如何在不同瀏覽器中可靠地設定選擇選項元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！