Question

我有一个多重选择列表。我正在尝试选择任何具有背景色的东西和任何选择不具有背景色的东西。

表单>提交>选择>选项我叫表格id = opti 我尝试过

#opti option:focus {
    background-color: #ffd56f;
}
#opti option:active {
    background-color: #ffd56f;
}
#opti option:hover {
    background-color: orange;
}

悬停有效，但我感兴趣的是在选定时（不仅在悬停时）更改选定选项元素的背景色。

如果CSS中没有此选项，那么什么是不错的选择（不给我指向预制的第三方软件的链接），也许是当更改项目选择或选择项目时运行的javascript函数还有一个被选中。

任何帮助都会很棒

Answer 1

您可以使用:checked伪类。（More information about the :checked pseudo-class）

但是浏览器和操作系统通常会单独处理select / option元素，并且不允许部分或全部样式。

例如，在Firefox（macOS）上，样式中的background-color被忽略。但是您可以利用box-shadow来更改背景的颜色。

但是要在页面中具有完全自定义的选择元素，并且在所有浏览器上都具有相同的外观和行为，还可以使用Select2之类的替换库。

select option:hover {
  background-color: yellow;
}
select option:checked {
  background-color: red; /* NOT working on Firefox (macOS) */
  box-shadow: 0 0 0 10px orange inset; /* working on Firefox (macOS) */
}

<select multiple>
  <option value="1">Lorem</option>
  <option value="2">Ipsum</option>
  <option value="3">Stack</option>
  <option value="4">Overflow</option>
</select>

如何使用伪类更改多个选择列表中所选项目的背景色

1 个答案: