How to change the arrow color of the html select box?

Question

I want to style a select element of bootstrap like the following picture provided:

but unfortunately couldn't change the color of the arrow.

 #test{ border: 1px solid #dd6592; border-radius: 0px; text-align: center; width:20%; font-size: 16px; margin-bottom: 20px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <select class="form-control" id="test"> <option>Test</option> <option>Test</option> <option>Test</option> </select>

Answer 1

It is not possible to change color on that arrow cross browser.

Here is a workaround, using a wrapper and a pseudo element.

 .myselect { position: relative; display: inline-block; } .myselect select { height: 30px; border-color: red; padding-right: 10px; outline: none; } .myselect::after { content: ''; position: absolute; right: 4px; top: 11px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(255,0,0,1); pointer-events: none; }

 <div class="myselect"> <select class="form-control" id="test"> <option>Test</option> <option>Test</option> <option>Test</option> </select> </div>

Answer 2

If you are using Bootstrap, you should see right inside the button element a span with class "caret". You need to change the COLOR style.

Answer 3

don't forget to use the appearance CSS property to hide the default arrow down provided by your browser.

.myselect {
  position: relative;
}
.myselect select {
  height: 26px;
  appearance: none;
  color: #636A7B;
  padding: 0 20px;
}
.myselect::after {
    font-family: 'Font Awesome\ 5 Free';
    content: "\f107";
    position: absolute;
    font-weight: 600; 
    right: 5px;
    top: 7px;
    color: #C5C7D2;
    background: white;
}

here are official docs for the property: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance