0

我有一个带有 multiple 属性的 select 元素，如下所示：

<select name="" id="selectGroup" multiple>
    ...
</select>

我已经像这样设置了悬停和选定颜色的样式：

#selectGroup option:hover {
    background: lightblue;
}

#selectGroup option:checked {
    box-shadow: 0 0 10px 100px lightblue inset;
}

现在，问题是当您实际单击一个项目（并使其处于活动状态）时，字体颜色会变为白色。我尝试过使用各种伪选择器，例如 :active、:focus 等，甚至只是将color选项或选择的样式放入其中，但没有任何效果。

是否可以更改活动项目的颜色？

有关示例，请参见此 codepen：https ://codepen.io/anon/pen/ywMQzp

4

1 回答 1

0

您可以在此 css 规则中找到答案。您不能覆盖大多数表单输入的默认样式，最常用的解决方法之一是将这些元素转换为更易于设置样式的元素（如div）。

select:-internal-list-box option:checked {
  background-color: -internal-inactive-list-box-selection !important;
  color: -internal-inactive-list-box-selection-text !important;
}

更多信息在这里：https ://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms

您还可以看到这个线程：How override default styles for a select element multiple

于 2019-03-07T17:20:11.890 回答