Select2 悬停颜色与 CSS答案

【问题标题】：Select2 hover color with CSSSelect2 悬停颜色与 CSS
【发布时间】：2014-02-05 17:21:47
【问题描述】：

我一直在尝试将默认的蓝色悬停颜色更改为我正在设计的网站的 Select2 元素中的不同颜色，但到目前为止没有成功。什么是正确的、有效的 css 选择器，它允许我更改 Select2 元素中悬停选择的背景颜色和字体颜色？提前谢谢！

编辑：

.select2-drop:hover {
background-color: #efefef;
}

我试过 .select2-container，选择但没有成功。添加的代码会在悬停时更改整个下拉菜单的颜色，但我只需要更改悬停选项。

【问题讨论】：

【解决方案1】：

试试这个

.select2-results .select2-highlighted {
    background: #f00;
    color: #fff;
}

【讨论】：

谢谢，成功了！我想我需要在选择器中包含 :hover ，这就是它以前不起作用的原因。现在可以了，而且看起来很酷！
@Revanka - 很高兴听到！作为记录，我以前从未真正听说过 select2。我只是使用 Chrome 开发人员工具来找出要更改的内容。开发者工具是你的朋友 :)

【解决方案2】：

您可以使用它来更改悬停颜色，适用于 Select2 V4.0.1

.select2-container--default .select2-results__option--highlighted[aria-selected] {
     background-color: #F0F1F2;
     color: #393A3B; 
}

【讨论】：

这是正确的，根据您的 .css 文件的顺序，您可能需要使用 !important 或更改文件的顺序。
这可行，但它被默认颜色覆盖。我在选择器的开头添加了body ，现在它可以在没有“！important”规则的情况下工作。像这样：body .select2-container--default .select2-results__option--highlighted[aria-selected]

【解决方案3】：

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: red;
  color:white
}

【讨论】：