Ala Ala - 1 year ago 169
CSS Question

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.

Ala Ala
Answer Source

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;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download