如何變更 HTML `` 元素中所選選項的背景顏色？

在 HTML Select 中自訂所選選項的背景顏色

在 HTML 中，元素使用戶能夠從選項清單中選擇單一選項。預設情況下，瀏覽器以藍色背景突出顯示所選選項。然而，開發人員通常希望進一步自訂此外觀。

在提供的範例中，定義了具有紅色背景的元素，但所選選項仍保持藍色。嘗試使用“selected-color”等樣式來覆蓋此行為已被證明是徒勞的。這個問題深入探討了可用於實現所需自訂的選項。

JavaScript 解決方案

僅純 CSS 可能不足以解決此問題。然而，一個簡單的 JavaScript 解決方案可以優雅地解決它。

var sel = document.getElementById('select_id');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i < this.childElementCount; i++){
        options[i].style.color = 'white';
    }
    var selected = this.children[this.selectedIndex];
        selected.style.color = 'red';
    }, false);

這種粗暴但有效的方法可以確保只有選定的選項保留指定的顏色，而所有其他選項都恢復為白色。

以上是如何變更 HTML `` 元素中所選選項的背景顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！