Geek Answers Handbook

Change carriage icon

I am using the selectpicker plugin and am trying to change the down arrow icon. I tried using css but that didn't work. How can I change this 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;
}
+4
source share
2 answers

It depends on what you want to change it for, but the carriage is currently derived from this CSS, which gives it a zero size, but uses a border to simulate a 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 can change it to a green square, for example:

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

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

Or you can use bootstrap worms:

.bootstrap-select.btn-group .dropdown-toggle .caret {
  width: 10px;
  height: 10px;
  border: none;
  font-family: 'Glyphicons Halflings';
}

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

Demo fiddle: http://jsfiddle.net/pvT8Q/461/ (I leave your positioning)

+6
source 

//select box arrow icon with pure css
.select-toggle{
   position: relative;
   display: inline-block;
   background:white;
   border:1px solid red;
}

.select-toggle::after{
  position: absolute;
  top: 10px;
  right: 5px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #023F55;
  content: "";
  pointer-events: none;
}

.select-toggle select{
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
<div class="select-toggle">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>
Hide result
0

More articles:


All Articles