Twitter bootstrap 如何更改selectize.js中的插入符号图标？_Twitter Bootstrap_Css_Twitter Bootstrap 3_Selectize.js

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

twitter-bootstrap css twitter-bootstrap-3

Twitter bootstrap 如何更改selectize.js中的插入符号图标？,twitter-bootstrap,css,twitter-bootstrap-3,selectize.js,Twitter Bootstrap,Css,Twitter Bootstrap 3,Selectize.js,我想将selectize.js中的插入符号图标更改为类似于引导程序（glyphicon菜单），如下图所示：我正在使用（selectize.bootstrap3.css）并尝试使用此css文件，但没有成功。当我查看selectize.js库的文档时，我看到插入符号是由css使用after选择器制作的此外，在插件的文档中，我看不到任何选项来设置另一个css类或图标或html标记，以操作插入符号你能做的是：使用所有者提供的样式，并保持这种方式询问所有者或在github上创建票证以询问此要

我想将selectize.js中的插入符号图标更改为类似于引导程序（glyphicon菜单），如下图所示：

我正在使用（selectize.bootstrap3.css）并尝试使用此css文件，但没有成功。

当我查看

selectize.js

库的文档时，我看到插入符号是由css使用

after

选择器制作的

此外，在插件的文档中，我看不到任何选项来设置另一个

css类

或

图标

或

html标记

，以操作插入符号

你能做的是：

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

如果您使用的是

Twitter Bootstrap

，那么您可以使用的另一个库是我建议使用'selected.js'来设置

select

的样式。您可以轻松地更改css中的插入符号图标，而不会出现任何问题

所选文件：

您想要使用的图标是“可折叠面板”的标准图标。下拉列表的标准图标就是您要删除的图标

即使你想删除，试试这个，它也会有用的

 <!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>


JS-Bin
文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}
#下拉列表{
-webkit外观：无；
-moz外观：无；
外观：无；
填充：2px 30px 2px 2px；
边界：无；
背景：透明
网址（“http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png）右中心无重复；
}
一个
两个
三

以下是输出：

点击图标后：

我已经想明白了。我在（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;

    }

在原始样式中使用纯css的方式。不确定它是否是最优的，但无论如何，也许它对某人来说很方便：）

。选择ize-control.single。选择ize-input:after{
内容：''；
显示：块；
位置：绝对位置；
最高：37%；
右：15px；
利润上限：-3px；
宽度：5px；
高度：5px；
边框样式：实心；
边框宽度：3倍；
边框颜色：#808080#808080透明；
变换：旋转（135度）；
}
.选择ize-control.single.选择ize-input.下拉菜单激活：之后{
最高：63%；
边框宽度：3倍；
边框颜色：透明透明#808080#808080；
}

以下是一种使用外部图标库在引导中实现此功能的廉价方法：

<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>

/select>

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

z索引将图标移到顶部，因为默认情况下它将处于选择控件下。右边空白将其向左移动，因为selectize创建控件的方式会将图标连接到错误的分区。

您能创建一个带有相关代码的演示吗？

<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>