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

Question

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

我正在使用 (selectize.bootstrap3.css) 并尝试使用这个 css 文件但没有成功。

Answer 1

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

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

你能做到的是：

使用所有者提供的样式并保留它
询问所有者或在 github 上创建工单以询问此要求
搜索另一个可以更改插入符的插件

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

Answer 2

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

选择的文档：

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

Answer 3

您要使用的图标是 "Collapsible Panels" 的标准图标。下拉菜单的标准图标是您要删除的图标。

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

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

这是输出：

点击图标后：

Answer 4

我想通了。我在呈现图标的 (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 5

像原始样式一样使用纯 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;
}

Answer 6

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

这是在 bootstrap 中使用外部图标库执行此操作的廉价方法：

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

，因此 margin-right 将其向左移动

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

How to change the caret icon in selectize.js?

twitter-bootstrap

css

twitter-bootstrap-3

selectize.js