如何更改 HTML 中选定的 选项的背景颜色？

HTML 的 CSS 样式 选定选项背景颜色

在 HTML 中， 元素用于创建下拉列表默认情况下，当选择一个选项时，其背景颜色变为蓝色，但是，您可能希望使用自定义该颜色。 CSS。

不存在用于设置所选 选项的背景颜色样式的 CSS 属性“selected-color”。仅纯 CSS 可能不足以完成此任务。

Javascript 解决方案

更可行的方法是结合使用 HTML、CSS 和 Javascript 来实现所需的结果。操作方法如下：

<select></select>

在上面的 HTML 代码中，我们创建了一个具有预定义红色背景颜色的 元素。

select {
    color: black; /* Default color for options */
}

此 CSS 设置了默认颜色 中的所有 元素都变为黑色。

var sel = document.getElementById('mySelect');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i <p>在此 Javascript 代码中，我们向 <select> 元素添加一个事件侦听器，当单击某个选项时，它会循环遍历所有 <option> 元素。元素并将其颜色设置为白色。然后，它将所选选项的颜色设置为红色。</option></select></p><p>通过结合 HTML、CSS 和 Javascript，您可以覆盖所选 <select> 选项的默认蓝色背景颜色。选项并根据您的喜好进行自定义。</select></p>

以上是如何更改 HTML 中选定的 选项的背景颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！