悬停时如何更改选项标签的背景颜色？

Question

有没有办法在没有 JS 的情况下将鼠标悬停在选项元素上时更改它的背景？

我的意思是一个带有选项的简单 select。

option:hover {
  background-color: yellow;
}

<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

我尝试了所有可用的选项。但是没有Javascript，我找不到解决方案。

Answer 1

几乎所有浏览器都不支持您提出的问题。人们经常使用从无序列表中构建选择的库，但你最好的解决方案是回到你的设计师那里并询问需求的必要性。许多库的可访问性合规性很差，并且它们总是增加一层维护的复杂性。

Answer 2

答案是否。目前，在 CSS3 中不支持此功能。或许下个版本会有。

但是，还有其他选择...

第一个选择是使用 Bootstrap 5 制作自定义下拉菜单。

该替代方案如下所示：

.wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-menu li:nth-child(1) > a:hover {
  background-color: pink;
}
.dropdown-menu li:nth-child(2) > a:hover {
  background-color: blue;
}
.dropdown-menu li:nth-child(3) > a:hover {
  background-color: yellow;
}
.dropdown-menu li:nth-child(4) > a:hover {
  background-color: green;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<div class="wrapper">
  <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Select</button>
    <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
      <li><a class="dropdown-item" href="#">Volvo</a></li>
      <li><a class="dropdown-item" href="#">Saab</a></li>
      <li><a class="dropdown-item" href="#">VW</a></li>
      <li><a class="dropdown-item" href="#">Audi</a></li>
    </ul>
  </div>
</div>

唯一已知的方法 select（限制）

浏览器兼容性：

Chrome: ✓

火狐浏览器：✓

野生动物园：☓

此替代方法是更改 option 的默认视图，您可以使用 onfocus 事件属性来更改它们。例如，您可以使用 <select onfocus="this.size=4;" onblur="this.size=0;" onchange="this.size=1; .this.blur();">

此 focus event 实质上更改了选项的默认样式。使用 onfocus，您可以指定 .this.size=4;" 为四个选项留出空间，而 onchange="this.size=1;" 则在选择一个选项后恢复默认值。 this:blur(); 允许它在选择选项并再次打开 select 后保持相同的 onfocus 效果。

在此处查看该版本：

option[value="volvo"]:hover {
  background-color: pink;
}

option[value="saab"]:hover {
  background-color: blue;
}

option[value="vw"]:hover {
  background-color: green;
}

option[value="audi"]:hover {
  background-color: yellow;
}

/* removes default scroll when using this.size */
select {
  overflow: hidden;
}

<select onfocus="this.size=4;" onchange="this.size=1; this.blur();">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">Opel</option>
  <option value="audi">Audi</option>
</select>

悬停时如何更改选项标签的背景颜色？

How to change background color of an option tag when hovering?

html

css

dropdown