Question

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

enter image description here

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

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

    }

Answer 2

您想要使用的图标是＆＃34;可折叠面板＆＃34;的标准。下拉列表的标准图标是您要删除的图标。

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

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

这是输出：

Icon is as per your requirement

点击图标后：

after click

Answer 3

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

＆＃13;

.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;
}

＆＃13;

Answer 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;
}

Answer 5

当我查看after库的文档时，我发现使用css class选择器的CSS使插入符号变得纯净。

同样在插件的文档中，我无法看到任何选项，以便设置另一个icon或html tag或Twitter Bootstrap来操纵插入符号。

你能做什么：

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

如果您使用bb.xml，则可以使用的另一个库是Bootstrap select

Answer 6

这是使用外部图标库进行引导的一种廉价方法：

<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将图标移到顶部，因为默认情况下它将位于select控件下。由于selectize创建控件的方式将图标附加到错误的div，因此右边距右边将其向左移动。

Answer 7

我建议'Chosen.js'代替你的select。您可以轻松更改css中的插入符号图标。

选择文档：

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

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

7 个答案: