Ala Ala - 2 months ago 47
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

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;

    }