更改焦点时保留背景颜色以供选择

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>众所周知，元素在任何类型的跨浏览器意义上都很难设计样式。如果这是您确实需要处理的事情，您可能需要使用基于 Javascript 的解决方案，例如 select，它将覆盖默认值<select>作为使用<div>或其他元素用于样式目的的外观。