Question

我正在使用Bootstrap的多选，我试图添加字体真棒图标...我使用图标作为unicode，但它不是工作。

 <select style="font-family:'FontAwesome', Arial;" multiple="multiple" 
      class="form-control vacances">
  <option>&#xf2bc; 1</option>
  <option>&#xf2bc; 2</option>
  <option>&#xf2bc; 3</option>
</select>

我注意到Multi-select构造函数正在添加它自己的ul-li，并拥有自己的模板......所以如果我想删除它，我该如何自定义它？选择选项计数器 - 它弄乱了ui

这是我的Fiddle

Answer 1

由于隐藏了原生<select>元素，而您所看到的“选择”只是由多选插件生成的<li> / <ul>结构，因此您应该申请.multiselect-native-select元素（这是一个parrent元素）而不是原始<select>的CSS规则：

.multiselect-native-select {
  font-family: 'FontAwesome', 'Helvetica';
}

这就是多选结构的样子：

<!-- Apply CSS rules here: -->
<span class="multiselect-native-select">

  <!-- This is your original <select> element, which is hidden: -->
  <select multiple="multiple" class="fontawesome-select vacances">
    <option disabled="" selected="">Options</option>
    <option> ZONE B</option>
    ...
  </select>

  <!-- This is the structure generated by multi-select plugin: -->
  <div class="btn-group">
    <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Options" aria-expanded="false">
      <span class="multiselect-selected-text">Options</span>
      <b class="caret"></b>
    </button>
    <ul class="multiselect-container dropdown-menu">

      <li class="disabled active">
        <a tabindex="-1">
          <label class="checkbox">
            <input type="checkbox" value="Options" disabled=""> Options
          </label>
        </a>
      </li>
      <li class="disabled active">
        <a tabindex="0">
          <label class="checkbox">
            <input type="checkbox" value=" ZONE B">  ZONE B
          </label>
        </a>
      </li>
      ...

    </ul>
  </div>
</span>

JSFiddle Demo

要停用选项计数器，您必须同时使用numberDisplayed和allSelectedText选项：

$('.vacances').multiselect({
  numberDisplayed: 10, //number that is more or equal to number of options
  allSelectedText: false
});

Answer 2

HTML

<select style="font-family:'FontAwesome', Arial;" multiple="multiple" 
          class="form-control vacances" id="opt">
      <option>value1</option>
      <option>value2</option>
      <option>value3</option>
    </select>

CSS

select#opt option[value="value1"]   { background-image:url(yourIcon.png);   }
select#opt option[value="value2"] { background-image:url(yourIcon.png); }
select#opt option[value="value3"] { background-image:url(yourIcon.png); }

Answer 3

<select multiple="multiple" class="form-control vacances">
  <option><i class="fa fa-font-icon-name></i> 1</option>
  <option><i class="fa fa-font-icon-name></i> 2</option>
  <option><i class="fa fa-font-icon-name></i> 3</option>
</select>

fa class的font-family是＆＃34; FontAwesome＆＃34;，font-icon-name，请参考http://fontawesome.io/cheatsheet/

在您的小提琴上看到您的代码，这里是一个快速修复以覆盖样式

.multiselect-container > li > a > label > input[type="checkbox"] {
  display: none;
}
.multiselect-container > li > a > label {
  padding: 3px 16px;
}

首先删除复选框，然后删除左侧的填充区域。

如何添加图标以进行多选？

3 个答案: