无法删除组合框中的悬停颜色

Question

我正在制作select2 combo box，我想删除蓝色悬停样式，但我无法删除它，不退出。我该怎么做？请给我一个解决方案，谢谢 EXAMPLE

Js

jQuery(document).ready(function($){
    $('select').select2({width:100});
    $('b[role="presentation"]').hide();
    $('.select2-selection__arrow').append('<i class="fa fa-angle-down"></i>');
});

查看

<select class="js-example-basic-single">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

CSS

.select2-dropdown.select2-dropdown--below{
      width: 148px !important;
}

.select2-container--default .select2-selection--single{
    padding:6px;
    height: 37px;
    width: 148px; 
    font-size: 1.2em;  
    position: relative;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
    background-image: -moz-linear-gradient(top, #424242, #030303);
    background-image: -ms-linear-gradient(top, #424242, #030303);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
    background-image: -webkit-linear-gradient(top, #424242, #030303);
    background-image: -o-linear-gradient(top, #424242, #030303);
    background-image: linear-gradient(#424242, #030303);
    width: 40px;
    color: #fff;
    font-size: 1.3em;
    padding: 4px 12px;
      height: 27px;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
}

Answer 1

如果您只是想从 :hover 上的元素中删除蓝色背景，您可以添加这行代码：

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

DEMO

Answer 2

习惯于 css 用于悬停和默认 background-color

html .select2-container--default .select2-results__option--highlighted[aria-selected]{background-color: green;}
html .select2-container--default .select2-results__option--highlighted[aria-selected]{color:#000;}
html .select2-container--default .select2-results__option[aria-selected=true]{background-color:red;}

Demo

Answer 3

添加样式

.select2-container--default .select2-results__option[aria-selected="true"]
{
background:#fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]
{
background:green;
color:#fff;
}

Answer 4

将以下内容添加到您的 CSS 代码中，因为导致蓝色悬停效果的代码位于缩小的 css 文件中并且难以编辑：

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: lightgreen !important;
    color: white;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: inherit;
}

Here is your updated JSFiddle

无法删除组合框中的悬停颜色

Can't remove hover color in combobox

html

css

ui-select2