为 chosenjs 添加向下图标到 multi select

Question

我一直在努力解决这个问题。 ChosenJs 的单个 select 有一个下拉箭头（如果您检查元素，它来自背景 CSS 属性），而 multiselect 则没有。

我需要将下拉图标添加到 multiselect。我宁愿不操纵 ChosenJs 附带的 CSS 文件。我更喜欢 jQuery/Javascript 解决方案，但我似乎不太明白。

$('.chosen-select').chosen({

}).change(function(obj, result) {

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">

<div>
  <p>
    no html down icon on multi select
  </p>
  <select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
    <option value=""></option>
    <option value="Any">[Any]</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
  </select>
  <p>
    html down icon on single select
  </p>

  <select data-placeholder="Choose a Country..." class="chosen-select" style="width: 350px;" tabindex="4">
    <option value=""></option>
    <option value="Any">[Any]</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
  </select>
</div>

Answer 1

有点字体很棒，一些 jQuery 和 Viola！

$('.chosen-select').chosen({

}).change(function(obj, result) {

});

$('<li><i class="fa fa-angle-down" /></li>').css({position: "absolute", right: "10px", top: "5px" }).appendTo('ul.chosen-choices');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
  <p>
    no html down icon on multi select
  </p>
  <select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
    <option value=""></option>
    <option value="Any">[Any]</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
  </select>
  <p>
    html down icon on single select
  </p>

  <select data-placeholder="Choose a Country..." class="chosen-select" style="width: 350px;" tabindex="4">
    <option value=""></option>
    <option value="Any">[Any]</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
  </select>
</div>

为 chosenjs 添加向下图标到 multi select

add down icon to multi select for chosenjs

javascript

css

jquery

jquery-chosen