下拉選擇的選項會改變容器和搜索框之間的顏色和間隙-有解無憂

我能夠更改所選選項的背景顏色，但在我將滑鼠懸停在任何其他選項上后它會更改其顏色。

有沒有辦法控制這個，我怎樣才能擺脫結果搜索框和容器之間這個煩人的空間，即使它沒有出現在代碼片段中。

下拉選擇的選項會改變容器和搜索框之間的顏色和間隙

代碼

#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/[email protected]/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/[email protected]/dist/js/select2.min.js"></script>
 
 <script>$(document).ready(function () {
      $('.select2').select2();
    });



  </script>

煩人的“空格”的解決方案給
元素增加了更多的行高
#bap .select2 .select2-selection__rendered {}

uj5u.com熱心網友回復：

您可以添加此 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/[email protected]/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/[email protected]/dist/js/select2.min.js"></script>
 
 <script>$(document).ready(function () {
      $('.select2').select2();
    });

  </script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387838.html

標籤：javascript html 查询 css jquery-select2

上一篇：如何使用jQuery或JavaScript從多個div中回傳最大的高度值

下一篇：numpy引發錯誤：TypeError：無法推斷型別的架構：<class'numpy.float64'>