如何更改 HTML 中选定的选项的背景颜色？-css教程-PHP中文网

首页

web前端

css教程

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

Mary-Kate Olsen

Dec 07, 2024 am 01:20 AM

How Can I Change the Background Color of a Selected <select> HTML 中的选项？
HTML 中的“ /> 选项？

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

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

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

Javascript 解决方案

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

<select>

登录后复制

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

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

登录后复制

此 CSS 设置了默认颜色<select> 中的所有

var sel = document.getElementById('mySelect');
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);

登录后复制

在此 Javascript 代码中，我们向 <select> 元素添加一个事件侦听器，当单击某个选项时，它会循环遍历所有

通过结合 HTML、CSS 和 Javascript，您可以覆盖所选 <select> 选项的默认蓝色背景颜色。选项并根据您的喜好进行自定义。

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn