html - 如何更改多选元素中事件项的字体颜色？

Question

我有一个带有 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 放入选项的样式或只是选择，但没有任何效果。

是否可以更改事件元素的颜色？

有关示例，请参阅此代码笔:https://codepen.io/anon/pen/ywMQzp

Answer 1

你可以在这个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