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=".1.1/jquery.min.js"></script>
<script src=".3.7/js/bootstrap.min.js"></script>
<link href=".3.7/css/bootstrap.min.css" rel="stylesheet"/>

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

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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>

• javascript
• jquery
• html
• css
• twitter-bootstrap-3

• 2 Can you show us the code that you have tried so far? – Sensoray Commented Jun 5, 2017 at 18:13
• 1 @nafi-pantha .. Can You Post Your Code Here ., – RïshïKêsh Kümar Commented Jun 5, 2017 at 18:14

3 Answers 3

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>

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.

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/en-US/docs/Web/CSS/appearance