如何使用 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中文网其他相关文章！