change dropdown arrow color with CSS

Question

I want to change the arrow color in this to blue

I have this code for dropdown menu.I tried this solution but its not working

<div class="form-group" style="float:right;margin-right:0px">
                <label for="priority">Task priority</label><br>
                <select class="form-control" style="width:380px">
                <option value="urgent" selected="selected">Urgent</option>
                <option value="important">important</option>
                <option value="later">Later</option>
                </select>
                </div>
                </div>

CSS .

form-control{
       border:0 !important;
       outline:none !important;
       color:black;
       -moz-box-shadow: 0 0 3px #ccc;
       -webkit-box-shadow: 0 0 3px #ccc;
        box-shadow: 0 0 3px #ccc;
        /* padding:20px !important; */
        height: 43px !important;
        border-radius:4px !important;  
    }

The code you shared doesn't match any of the code from the linked question. Please [edit your question](https://stackoverflow.com/posts/58290685/edit) to include the actual code you're using, including the CSS code. — Jordan Running, Oct 08 '19 at 16:47

davidev · Accepted Answer · 2019-10-08T17:32:18.340

2

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/

edited Oct 08 '19 at 17:32

answered Oct 08 '19 at 16:57

davidev

7,694
5
21
56

the question is which are these elements? – girlio salama Oct 08 '19 at 16:58
Adding these css to your select element will hide the arrow. Now you can try adding your own triangle. I would try placing it with absolute positioning. – davidev Oct 08 '19 at 17:01
.form-control::after{ appearance: none; } tried that but its still visible – girlio salama Oct 08 '19 at 17:05
See this jsfiddle: https://jsfiddle.net/3ngzk1vp/ – davidev Oct 08 '19 at 17:12
Does the jsfiddle helps you? Make sure to add pointer-events:none; to the ::before element, so it opens the option even if you click on the triangle. – davidev Oct 08 '19 at 17:22

change dropdown arrow color with CSS

1 Answers1