更改焦点时保留选项的背景颜色答案

【问题标题】：Keep background color for option when changing focus更改焦点时保留选项的背景颜色
【发布时间】：2016-07-27 02:43:32
【问题描述】：

在此示例中：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;
}

谢谢，

【问题讨论】：

您的内联代码和小提琴不匹配，请修复。
否：点击 2 然后点击 B 然后在外面 => 2 和 B 将是灰色的。我希望它们是红色的。
@Pangloss：谢谢。现在好了

标签： html css

【解决方案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> 或其他元素进行样式设置。

【讨论】：

好吧 :-/ 所以没有简单的方法可以做到这一点。

【解决方案2】：

这可以通过一些 JavaScript 在失去焦点时在选择上绘制一条条来完成。条带位于所选选项上方，因此它具有相同的位置和大小，还有字体/填充等，但它具有不同的背景颜色。我设法编写了一个脚本，该脚本可以为我的 Intranet 站点提供技巧，因此它适用于一页上大小> 1 的多个选择。当所选选项不完全可见时，条带也仅部分绘制。这个问题显然不会发生在 size=1 的选择中。

【讨论】：

【解决方案3】：

当你只改变背景颜色时，它不会改变。试试这个，

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

更多信息请参考link

【讨论】：