"select2 未顯示向下箭頭圖標"

Question

我的 select2 工作正常，我只有 1 個小錯誤，選擇框中的向下箭頭圖標沒有顯示，你們知道為什么嗎？

這讓用戶有點困惑我試圖找到錯誤，但我無法修復錯誤，你們能幫幫我嗎？ 該代碼在此處不起作用，但在 jsfiddle 鏈接中起作用。

jsfiddle：http: //jsfiddle.net/yszv1ob2/

 $("#e1").select2();

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css"> <select multiple id="e1" style="width:300px"> <option value="AL">Alabama</option> <option value="Am">Amalapuram</option> <option value="An">Anakapalli</option> <option value="Ak">Akkayapalem</option> <option value="WY">Wyoming</option> </select>

Answer 1

您使用了多選下拉菜單並使用了插件（Select2）不要在多選下拉菜單中添加下拉箭頭。 所以如果你想添加下拉箭頭，你必須添加一些像下面這樣的自定義 CSS。

ul.select2-choices {
    padding-right: 30px !important;
}

ul.select2-choices:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

Answer 2

對於 Select2 版本 4.0.5+，此代碼完全復制了單選箭頭。

.select2-selection--multiple:before {
    content: "";
    position: absolute;
    right: 7px;
    top: 42%;
    border-top: 5px solid #888;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

Answer 3

 $(function () { $("#select1").select2(); });

 .select2-container--default .select2-selection--multiple:before { content: ' '; display: block; position: absolute; border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; right: 6px; margin-left: -4px; margin-top: -2px;top: 50%; width: 0;cursor: pointer } .select2-container--open .select2-selection--multiple:before { content: ' '; display: block; position: absolute; border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; height: 0; right: 6px; margin-left: -4px; margin-top: -2px;top: 50%; width: 0;cursor: pointer }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <select multiple id="select1" style="width: 300px"> <option value="AL">Alabama</option> <option value="Am">Amalapuram</option> <option value="An">Anakapalli</option> <option value="Ak">Akkayapalem</option> <option value="WY">Wyoming</option> </select>

來源： https : //github.com/select2/select2/issues/167#issuecomment-322461384

Answer 4

 $("#e1").select2();

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css"> <select multiple id="e1" style="width:300px"> <option value="AL">Alabama</option> <option value="Am">Amalapuram</option> <option value="An">Anakapalli</option> <option value="Ak">Akkayapalem</option> <option value="WY">Wyoming</option> </select>

Answer 5

未顯示，因為您在select標記中有multiple屬性，只需刪除它：

<select id="e1" style="width:300px">
  <option value="AL">Alabama</option>
  <option value="Am">Amalapuram</option>
  <option value="An">Anakapalli</option>
  <option value="Ak">Akkayapalem</option>
  <option value="WY">Wyoming</option>
</select>

Answer 6

根據Adam Love 的回答，此代碼使用 FontAwesome 人字形向下圖標（盡管您可以輕松地將其換成不同的圖標）：

.select2-container--default .select2-selection--multiple {
    padding-right: 20px;
}
.select2-container--default .select2-selection--multiple::after {
    position: absolute;
    right: 5px;
    top: 42%;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    content: "\f078";
    font-size: 0.7rem;
}

Answer 7

您可以添加此 css 代碼，它將適用於選擇跨度

.select2-selection__arrow {
  height: 26px;
  position: absolute;
  top: 10px;
  right: 7px;
  width: 20px;
}
.select2-selection__arrow b{
    border-color: #009688 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0;
  }