如何将图标添加到多选？

debugcn 发表于 Dev

罗伊巴恩

我正在使用 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

这是我的小提琴

阿图尔·菲利皮克

因为原生<select>元素是隐藏的，你看到的“选择”只是多选插件生成的<li>/<ul>结构，你应该为.multiselect-native-select元素（它是一个父元素）而不是原始元素应用 CSS 规则<select>：

.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 演示

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-11

我来说两句

0条评论

登录后参与评论

来自分类Dev

如何将图标（天才）添加到CalendarEvent？

来自分类Dev

如何将图标添加到JPanel

来自分类Dev

如何将偏心背景添加到SVG图标

来自分类Dev

如何将字形图标添加到rails link_to helper-Bootstrap 3

来自分类Dev

如何将图标从文件添加到MahApps.Metro WPF窗口？

来自分类Dev

Android-如何将徽章计数添加到应用程序图标？

来自分类Dev

如何将“真棒字体”图标添加到文件输入字段

来自分类Dev

如何将社交媒体图标添加到React组件？

来自分类Dev

如何将应用程序图标添加到Xamarin Android应用程序

来自分类Dev

如何将后缀图标添加到material-ui-pickers输入字段

来自分类Dev

如何将重定向链接添加到onclick材质ui图标-React

来自分类Dev

如何将样式对象添加到数组中的每个图标？（React / Material-ui）

来自分类Dev

如何将图标添加到统一底座（而不是拖放）？

来自分类Dev

如何将按钮图标添加到自定义键盘iOS 8？

来自分类Dev

如何将垃圾桶图标添加到Gnome 3收藏夹？

来自分类Dev

如何将图标添加到语义 ui 下拉列表中？

来自分类Dev

如何将图标添加到故事板中的 iOS 静态 uitableview 单元格

来自分类Dev

如何将网站图标和页面标题添加到 asp.net 页面

来自分类Dev

如何将控件添加到 WPF 列表视图标题

来自分类Dev

如何将图标添加到我的选项卡布局活动

来自分类Dev

如何将关闭图标添加到完整日历？

来自分类Dev

如何将图标/图像添加到 react.js 中的选择选项？

来自分类Dev

如何将图标预览添加到谷歌商店应用程序的 html 列表中？

来自分类Dev

如何仅将图标添加到某些按钮？

来自分类Dev

Android：如何将点击监听器添加到菜单图标（顶部3个点）？

来自分类Dev

如果使用fontawesome图标集，如何将操作按钮添加到免费的jqgrid工具栏

来自分类Dev

在Firefox非覆盖扩展程序中，如何将文本添加到浏览器工具栏图标？

来自分类Dev

如果使用fontawesome图标集，如何将操作按钮添加到免费的jqgrid工具栏

来自分类Dev

如何将我自己的图标添加到Raphael的免费图标股票中？

Related 相关文章

文章