我有一个带有 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
最佳答案
你可以在这个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
关于html - 如何更改多选元素中事件项的字体颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55049158/