如何更改 selectize.js 中的插入符号图标？答案

【问题标题】：How to change the caret icon in selectize.js?如何更改 selectize.js 中的插入符号图标？
【发布时间】：2015-08-22 16:54:43
【问题描述】：

我想将 selectize.js 中的插入符号图标更改为如下图所示的引导程序（glyphicon-menu）：

我正在使用 (selectize.bootstrap3.css) 并尝试使用此 css 文件但没有运气。

【问题讨论】：

能用相关代码做一个demo吗？

标签： twitter-bootstrap css twitter-bootstrap-3 selectize.js

【解决方案1】：

我想通了。我在 (selectize.bootstrap3.css) 文件中更改了呈现图标的以下 css 类：

.selectize-control.single .selectize-input:after {
        content: '\e259'; /*This will draw the icon*/
        font-family: "Glyphicons Halflings";
        line-height: 2;
        display: block;
        position: absolute;
        top: -5px;
        right: 0;
        background-color: white;
        padding-right: 2px;
           }

    .selectize-control.single .selectize-input.dropdown-active:after {
        content: '\e260';
        font-family: "Glyphicons Halflings";
        background-color: white;
        padding-right: 2px;

    }

【讨论】：

【解决方案2】：

您要使用的图标是“可折叠面板”的标准图标。下拉菜单的标准图标是您要删除的图标。

即使你想删除试试这个，它会起作用

 <!DOCTYPE html>
  <html>
    <head>
     <meta charset=utf-8 />
     <title>JS Bin</title>
     <!--[if IE]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
    article, aside, figure, footer, header, hgroup, 
     menu, nav, section { display: block; }

    #dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
    background: transparent   
 url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
   }
 </style>
 </head>
 <body>
 <form>
 <fieldset>
  <select id="dropdown" name="dropdown">
    <option value="1" selected="selected">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  </fieldset>
  </form>
  </body>
  </html>

这是输出：

点击图标后：

【讨论】：

【解决方案3】：

在原始样式中使用纯 css 的方式。不确定它是否是最佳的，但无论如何它对某人来说可能会很方便:)

.selectize-control.single .selectize-input:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 37%;
    right: 15px;
    margin-top: -3px;
    width: 5px;
    height: 5px;
    border-style: solid;
    border-width: 3px;
    border-color: #808080 #808080 transparent transparent;
    transform: rotate(135deg);
}

.selectize-control.single .selectize-input.dropdown-active:after {
    top: 63%;
    border-width: 3px;
    border-color: transparent transparent #808080 #808080;
}

【讨论】：

【解决方案4】：

.selectize-control.single .selectize-input:after {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border: 2px solid rgba(0,0,0,.2);
  border-width: 0 2px 2px 0;
  margin-top: -6px;
}
.selectize-control.single .selectize-input.dropdown-active:after {
  border: 2px solid rgba(0,0,0,.2);
  border-width: 2px 0 0 2px;
  margin-top: -2px;
}
.selectize-input {
  white-space: nowrap;
}

【讨论】：

【解决方案5】：

这是一种在引导程序中使用外部图标库的廉价方法：

<select id="select-list" class="form-control" placeholder="Select a list...">/select>
<div class="input-icon-addon" style="z-index:2; margin-right: 12px;">
  <i class="fe fe-chevron-down"></i>
</div>

这使用羽毛图标，但字体很棒，可能也可以工作。

z-index 将图标移动到顶部，因为默认情况下它将在选择控件下。由于 selectize 创建控件的方式，margin-right 将其移动到左侧，因此图标被附加到错误的 div 上。

【讨论】：

【解决方案6】：

当我查看 selectize.js 库的文档时，我发现插入符号是由 CSS 使用 after 选择器制成的。

此外，在插件的文档中，我看不到任何选项来设置另一个 css class 或 icon 或 html tag 来操作插入符号。

你可以做的是：

使用所有者提供的样式并保持这种方式
询问所有者或在github上创建票证以询问此要求
搜索另一个可以更改插入符号的插件

如果您使用的是Twitter Bootstrap，您可以使用的另一个库是Bootstrap select

【讨论】：

【解决方案7】：

我建议使用“Chosen.js”来设置select 的样式。您可以毫无问题地轻松更改 CSS 中的插入符号图标。

选择的文档：

http://harvesthq.github.io/chosen/

【讨论】：