Change caret icon

Question

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 1

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;
  font-family: 'Glyphicons Halflings';
}

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

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

Answer 2

js fiddle example here here

//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>

Answer 3

Here is the fiddle link you can use to change the dropdown caret icon : https://jsfiddle.net/vivek1313/0xugbrat/

<div class="selection-wrapper" onclick="toggleUpDown()">

<select name="list" id="languageDropdown" class='selection'>
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana">Banana</option>
  <option value="Mango">Mango</option>
</select>
<div id="caret" class="triangle triangle-up"></div>
</div>
<script>
var triangleEl = document.getElementById('caret');
var languageDropdown = document.getElementById('languageDropdown');
function toggleUpDown() {

    if(!triangleEl.classList.contains('triangle-up')){
    showDownArrow();
  } else {
     showUpArrow();
  }

} 


 function showUpArrow() {
   triangleEl.classList.remove('triangle-up');
    triangleEl.classList.add('triangle-down')
 }

function showDownArrow() {
    triangleEl.classList.remove('triangle-down');
      triangleEl.classList.add('triangle-up')
}
languageDropdown.addEventListener('blur',toggleUpDown)
</script>

.selection-wrapper {
  position: relative;
  width: 30%;
}
.selection {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding:5px;
  position: relative;
  content:'';
}

.triangle{
  position: absolute;
  top: 30%;
  right: 5px; 
  width: 0;
  height: 0;
  content: "";
  pointer-events: none;
  z-index:5;
}

.triangle-up {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #023F55;

}

.triangle-down {
  top: 10%;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid transparent;
  border-bottom: 6px solid  #023F55;
}