如何使用 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 <p>在此腳本中：</p>

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

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

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