I want to change the caret icon in selectize.js to be like bootstrap's (glyphicon-menu) as shown in the image below:
I am using (selectize.bootstrap3.css) and tried to play with this css file but no luck.
How to change the caret icon in selectize.js?
7.5k views Asked by Ala At
7
There are 7 answers
0
On
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
0
On
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:
After click on icon:
0
On
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.
0
On
.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;
}
0
On
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;
}
I have figured it out. I changed the following css classes inside (selectize.bootstrap3.css) file that render the icon: