如何使用 CSS 和 JavaScript 來變更 `` 元素中所選選項的背景顏色？

自訂中所選選項的背景顏色使用CSS

雖然CSS 為 提供了充足的樣式選項，但元素，它缺少特定的樣式屬性來更改目前所選選項的背景顏色。然而，純CSS和JavaScript的組合可以有效地解決這個限制。

在提供的範例HTML程式碼中，元素使用「background-color:red;」為下拉式清單設定背景顏色。但是，選擇一個選項後，它會採用預設的藍色。要覆寫此設定並自訂所選選項的背景顏色，傳統的 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);

在此腳本中：

• 我們擷取 ;元素的 ID。
• 當使用者點擊 時元素，它會循環遍歷所有子元素（選項）以將其顏色設為白色。
• 然後取得所選選項並將其顏色設為紅色，並從其餘元素中突出顯示它。

雖然此 JavaScript 解決方案允許自訂所選選項的背景顏色，但需要注意的是，它不會直接更改元素的 CSS 樣式。它透過 JavaScript 操縱元素的動態外觀。當要求僅自訂所選選項的背景顏色且不涉及 的進一步 CSS 自訂時，此方法可能是可行的解決方案。元素。

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