如何自定义 HTML `` 元素中所选选项的背景颜色？-css教程-PHP中文网

如何自定义 HTML `` 元素中所选选项的背景颜色？

Patricia Arquette

发布： 2024-11-27 21:28:10

原创

262 人浏览过

How Can I Customize the Background Color of Selected Options in HTML `` Elements?

在 HTML 中设置所选选项的样式 <select>元素

在 HTML 表单中，<select>元素提供了一个选项的下拉列表供用户选择。默认情况下，所选选项显示在蓝色背景中。本文探讨了如何使用 CSS 和 JavaScript 自定义所选选项的背景颜色。

CSS 方法

不幸的是，没有固有的 CSS 属性来修改背景<select> 中所选选项的颜色元素。但是，您可以使用 CSS 和 HTML 创建自定义选择元素来实现此目的：

<div class="custom-select">
  <select>

登录后复制

.custom-select {
  position: relative;
  width: 200px;
}

.custom-select select {
  display: none;
}

.custom-select-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.custom-select:hover .custom-select-overlay {
  opacity: 0.5;
}

.custom-select select:focus + .custom-select-overlay {
  opacity: 1;
}

登录后复制

JavaScript 方法

使用 JavaScript，您可以操作DOM 直接在选择时更改所选选项的背景颜色：

<select>

登录后复制

var select = document.getElementById('mySelect');

select.addEventListener('change', function() {
  var options = this.children;
  for (var i = 0; i < options.length; i++) {
    options[i].style.backgroundColor = 'white';
  }
  this.children[this.selectedIndex].style.backgroundColor = 'red';
});

登录后复制

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