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
Margin-Top Not Working For Span Element
How to Make an Svg Scale With Its Parent Container
How to Prevent Long Words from Breaking My Div
How to Center ≪Ul≫ ≪Li≫ into a Div
Is Float For Layout Bad? What Should Be Used in Its Place
Show Child Div Within Hidden Parent Div
Html 5 Strange Img Always Adds 3Px Margin At Bottom
Single Huge .Css File Vs. Multiple Smaller Specific .Css Files
How to Force a Div Block to Extend to the Bottom of a Page Even If It Has No Content
Is There a CSS Parent Selector
How to Combine :Nth-Child() or :Nth-Of-Type() With an Arbitrary Selector
Why Can't an Element With a Z-Index Value Cover Its Child
How to Make 3-Corner-Rounded Triangle in Css
Left Aligned Last Row in Centered Grid of Elements
How to Change Colour of Blue Highlight on Select Box Dropdown