Select2 悬停颜色与 CSS

Posted 2023-05-07

【中文标题】Select2 悬停颜色与 CSS

【英文标题】：Select2 hover color with 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

【讨论】：

请在代码前使用4个空格将其格式化为代码。

这对我有用，我正在使用 select2 v4.0.6-rc.0 有了这个我们可以改变悬停选项的背景颜色