brunodd brunodd - 23 days ago 6
CSS Question

Change caret icon

I am using selectpicker plugin and am trying to change the down arrow icon. I tried using css but it didn't work. How I could change that icon?

jsfiddle

<select class="form-control selectpicker" data-hide-disabled="true" data-show-subtext="true" data-live-search="true">
<option value="" disabled selected></option>
<option value="update" data-subtext="old subtext">Update subtext</option>
<option value="delete" data-subtext="more subtext">Delete subtext</option>
</select>


CSS

.bootstrap-select.btn-group .dropdown-toggle .caret {
display: none;
}

Answer

It depends on what you want to change it to, but currently the caret comes from this CSS which gives it zero size but applies a border to mimic the down arrow:

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid\9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

You could change it to a green square for example:

.bootstrap-select.btn-group .dropdown-toggle .caret {
  width: 10px;
  height: 10px;
  border: none;
  background-color: green;
}

Demonstration fiddle: http://jsfiddle.net/pvT8Q/460/

Or you could use the Bootstrap Glyphicons:

.bootstrap-select.btn-group .dropdown-toggle .caret {
  width: 10px;
  height: 10px;
  border: none;
}

.bootstrap-select.btn-group .dropdown-toggle .caret:before {
  content: "\e003";
}

Demonstration fiddle: http://jsfiddle.net/pvT8Q/461/ (I leave the positioning up to you)