How to change the caret icon in selectize.js?

问题

I want to change the caret icon in selectize.js to be like bootstrap's (glyphicon-menu) as shown in the image below:

enter image description here

I am using (selectize.bootstrap3.css) and tried to play with this css file but no luck.

回答1:

I have figured it out. I changed the following css classes inside (selectize.bootstrap3.css) file that render the icon:

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

The icon you wanted to use is standard for "Collapsible Panels". The standard icon for dropdown is the one you wanted to remove.

Even if you wanted to remove try this, it will work

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

Here is the output:

Icon is as per your requirement

After click on icon:

after click

回答3:

The way with using pure css like in original styles. Not sure if it's optimal, but anyway maybe it'l be handy for someone :)

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

Here's a cheap way to do it in bootstrap with an external icon library:

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

This uses feather icons, but font awesome with probably work as well.

The z-index moves the icon to the top, because it will be under the select control by default. The margin-right moves it to the left, because of the way that selectize creates controls the icon gets attached to the wrong div.

回答6:

When I look at the docs of the selectize.js library, I see that the caret is made pure by CSS using the after selector.

Also in the docs of the plugin I can't see any option in order to set another css class or icon or html tag to manipulate the caret.

What you could to is:

Use the style that is provided by the owner and leave it this way
Ask the owner or create a ticket on github in order to ask this requirement
Search for another plugin where this is possible to change the caret

Another library that you can use, if you are using Twitter Bootstrap, is Bootstrap select

回答7:

I would suggest 'Chosen.js' instead to style your select. You can easily change the caret icon within the css with no problems.

Chosen documentation:

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

来源：https://stackoverflow.com/questions/30705505/how-to-change-the-caret-icon-in-selectize-js

标签

twitter-bootstrap

css

twitter-bootstrap-3

selectize.js