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>或其他元素进行样式设置的外观。

Answer 2

这可以通过一些JavaScript来完成，当它们失去焦点时，它会在选择上绘制一条带。该条位于所选选项上方，因此它具有相同的位置和大小，以及字体/填充等，但是背景颜色不同。我设法编写了一个脚本来解决我的Intranet网站的问题，因此它可以很好地与一页上尺寸大于1的多个选择一起使用。当所选选项不完全可见时，该条也仅被部分绘制。在size = 1的选择中显然不会发生此问题。

Answer 3

仅更改背景颜色时，它不会更改。试试这个，

select[multiple]:focus option:checked {
    background: red linear-gradient(0deg, red 0%, red 100%);
}

有关更多信息，请参阅此link

更改焦点时保持背景颜色可供选项

3 个答案: