如何使用伪 class 更改多个 select 列表中 selected 项目的背景颜色

Question

我有多个 select 列表。我正在尝试让任何 select 有背景颜色的东西和任何 select 没有背景颜色的东西。

表格 > 归档 > select > 选项我调用了表单 id=opti 我试过了

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

悬停有效，但我有兴趣在 selected 时更改 selected 选项元素背景颜色，而不仅仅是悬停时。

如果 css 中没有这个选项，什么是好的替代方案（不给我 link 预制的第 3 方软件），也许 javascript 功能当一项 selection 更改时运行，或者当一项 selected 和一项 selected.

任何帮助都会很棒

Answer 1

可以使用:checkedpseudo-class。 (More information about the :checked pseudo-class)

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

例如在 Firefox (macOS) 上，来自样式的 background-color 会被忽略。但是你可以利用 box-shadow 来改变背景的颜色。

但是要在您的页面中完全自定义 select-elements，使其在所有浏览器上的外观和行为都相同，您还可以使用 replacement-library，例如 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>

如何使用伪 class 更改多个 select 列表中 selected 项目的背景颜色

How to use pseudo-class for changing background color of selected items in multiple select list

css

html-select

pseudo-element