下拉选择的选项改变颜色和容器和搜索框之间的差距

Question

我能够更改所选选项的背景颜色，但在我将鼠标悬停在任何其他选项上后它会更改颜色。

有什么方法可以控制它吗？我怎样才能摆脱结果搜索框和容器之间令人讨厌的 space，即使它没有出现在代码片段中。

代码

#bap + .select2 .select2-selection__rendered {
  background-color: yellow;
}

/* Each result */
#select2-bap-results {
  background-color: salmon;
}

/* Higlighted (hover) result */
#select2-bap-results .select2-results__option--highlighted {
  background-color: rgb(5, 27, 27) !important;
}

/* Selected option */
#select2-bap-results .select2-results__option[aria-selected="true"] {
  background-color: rgb(13, 14, 14) !important;
}

/* Around the search field */
.select2-search {
  background-color: orange;
}

/* Search field */
.select2-search input {
  background-color: pink;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  



  <!-- -->

</head>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/search" method="get" class="d-flex w-25">
    <select id="bap" class="select2" style="width: 100%;" name="state">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
        <option value="WY">Wyoming</option>
        <option value="WY">Wyoming</option>
    </select>
 
</form>

 <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 
 <script>$(document).ready(function () {
      $('.select2').select2();
    });



  </script>

解决烦人的“空白space”
为元素添加了更多的行高
#bap + .select2 .select2-selection__rendered {}

Answer 1

您可以添加此 CSS 来更改与灰色背景一起出现的所选选项背景颜色：（我只是使用绿色作为示例）

#select2-bap-results .select2-results__option--selected {
    background-color: green;
}

该更改应用于下面的可运行示例：

#bap + .select2 .select2-selection__rendered {
  background-color: yellow;
}

/* Each result */
#select2-bap-results {
  background-color: salmon;
}

/* Higlighted (hover) result */
#select2-bap-results .select2-results__option--highlighted {
  background-color: rgb(5, 27, 27) !important;
}

/* Selected option */
#select2-bap-results .select2-results__option[aria-selected="true"] {
  background-color: rgb(13, 14, 14) !important;
}

/* Around the search field */
.select2-search {
  background-color: orange;
}

/* Search field */
.select2-search input {
  background-color: pink;
}

#select2-bap-results .select2-results__option--selected {
    background-color: green;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  
  <!-- -->

</head>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/search" method="get" class="d-flex w-25">
    <select id="bap" class="select2" style="width: 100%;" name="state">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
        <option value="WY">Wyoming</option>
        <option value="WY">Wyoming</option>
    </select>
 
</form>

 <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 
 <script>$(document).ready(function () {
      $('.select2').select2();
    });

  </script>

下拉选择的选项改变颜色和容器和搜索框之间的差距

Dropdown selected option changes color and a gap between the container and search-box

javascript

html

jquery

css

jquery-select2