html - 更改焦点时保留选项的背景颜色

Question

在这个例子中:https://jsfiddle.net/pfc1qauz/10/当我选择 2 并将焦点更改为 C(右侧部分的任何内容)时，2 的背景颜色变为灰色。如何在不聚焦时保持红色？

HTML:

<select class="multiselect-left" size=4>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<select class="multiselect-right" size=4>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

CSS:

option{
  background: #F00;
}

谢谢，

Answer 1

这可能是浏览器特定样式的结果。如您所见，如果您在 Google Chrome 中使用开发者工具 (F12):

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

即使您使用自己的值添加相同的样式，它仍然不会正确覆盖它:

select:-internal-list-box option:checked {
    background-color: red!important;
    color: #FFF!important;
}

这是将您看到的样式应用到任何 <select> 中选中的选项元素，它不能真正被直接覆盖。

<select>众所周知，元素很难在任何一种跨浏览器的意义上进行样式化。如果这是您真正需要处理的事情，您可能需要 use a Javascript-based solution like select这将覆盖默认 <select>作为使用 <div> 的门面或其他用于样式目的的元素。