Change the color of arrow select drop down

Question

Hi there can anyone help me how can I change the color of this arrow on select without changing the color of the text, I don't want to add an image of arrow I simply need to change this color nothing else

select.dropdowni{
color: red;
}

<select  class="btn btn-default dropdown-toggle dropdowni" name="{{ $question->id }}[]"> 
 <ul class="dropdown-menu">
<option value="{{ $option->id }}">Test</option>
</ul>
</select>

Possible duplicate of [HTML CSS Change Color of SELECT ARROW](https://stackoverflow.com/questions/38870246/html-css-change-color-of-select-arrow) — Carl Binalla, Jan 24 '18 at 08:39
Possible duplicate of [Change color and appearance of drop down arrow](https://stackoverflow.com/questions/611482/change-color-and-appearance-of-drop-down-arrow) — Mohammad Usman, Jan 24 '18 at 08:40

Hiren Jungi · Answer 1 · 2018-01-24T08:55:03.647

You can try something like this.

<!DOCTYPE html>
<html>
<style>
    .select_div{
  overflow: hidden;
  border: 1px solid #000;
  position: relative;
  padding: 10px 0;
}
.select_div:after{
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #f00;
  position: absolute;
  top: 40%;
  right: 5px;
  content: "";
  z-index: 98;
 }
.select_div select{
  width: 110%;
  border: 0;
  position: relative;
  z-index: 99;
  background: none;
}
</style>
<body>
<div class="select_div">
 <select>
   <option>Test This Select</option>
   <option>Test This Select</option>
 </select>
</div>

</body>
</html>

Change the color of arrow select drop down

1 Answers1