How to change the caret icon in selectize.js?

Asked 8/6, 2015 at 9:27 Answered 6/3, 2019 at 21:57

Solved twitter-bootstrap css twitter-bootstrap-3 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.

Woo answered 8/6, 2015 at 9:27 Comment(1)

Can you create a demo with relevant code? – Roshelle 8/6, 2015 at 9:28

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;

    }

Woo answered 8/6, 2015 at 10:57 Comment(0)

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

Magical answered 8/6, 2015 at 10:16 Comment(0)

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

Lole answered 14/9, 2016 at 22:8 Comment(0)

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

Zipnick answered 21/4, 2017 at 15:9 Comment(0)

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.

Watcher answered 6/3, 2019 at 21:57 Comment(0)

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

Unsling answered 8/6, 2015 at 9:44 Comment(0)

-1

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/

Finland answered 8/6, 2015 at 9:59 Comment(0)

Recommended topics

Hot tags