Change Color and Appearance of Drop Down Arrow

How to change colour of select dropdown arrow?

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}

change dropdown arrow color with CSS

It looks like you are using the default HTML select boxes. These are usually styled by the browser. You can change little style settings like you did. Looks like you are using a library like bootstrap, which predefine a style for them.

Back to the question: you can't really change that color. You could try to hide these default elements with

appearance: none;

-moz-appearance: none;

-webkit-appearance: none;

and make a custom css styling.

.selectorDiv
{
position:relative;
display: inline-block;
}

.selectorDiv::before
{
position: absolute;
right: 20px;
top:0;
bottom:0;

margin-top:auto;
margin-bottom:auto;

margin-left: auto;

content: "";
z-index:5;

width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;

border-left: 10px solid green;

pointer-events:none;

}

Edit: including jfiddle with own styling https://jsfiddle.net/3ngzk1vp/1/

HTML CSS Change Color of SELECT ARROW

.select_box{  width: 200px;  overflow: hidden;  border: 1px solid #000;  position: relative;  padding: 10px 0;}.select_box: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_box select{  width: 220px;  border: 0;  position: relative;  z-index: 99;  background: none;}
<div class="select_box"> <select>   <option>Test This Select</option>   <option>Test This Select</option> </select></div>

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

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>


Related Topics



Leave a reply



Submit