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