Problem when changing select option in another color

Question

i have created a select. But I can't figure out how to change the blue border and hover background to another color in the option area...

Do you have a solution for me?

My Code:

<select name="slct2" id="slct2" required title="">
              <!-- Options -->
              <option value="" hidden>Jahr</option>
              <option>2020</option>
              <option>2019</option>
      </select>

score 0 · Answer 1 · answered Jan 08 '20 at 11:39

The blue border can be changed by

select {outline: none;}

But to my knowledge, you cannot change the color of the select options, because this is rendered by the browser itself and is also operating system dependent (blue for windows, orange for ubuntu, ...). What you always can do as an alternative if it is really necessary is creating a custom dropdown, but this involves quite some work (For example: https://dev.to/emmabostian/creating-a-custom-accessible-drop-down-3gmo).

akhtarvahid · Answer 2 · 2020-01-08T12:34:38.493

0

Are you looking like this?

select {
  width: 150px;
  margin: 50px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://image.flaticon.com/icons/png/512/61/61041.png)
  96% / 15% no-repeat #EEE;
    outline:none;
}
option:hover{
background:coral
}

<select name="slct2" id="slct2" required title="">
  <option value="" hidden>Jahr</option>
  <option>2020</option>
  <option>2019</option>
  <option>2018</option>
 </select>

edited Jan 08 '20 at 12:34

answered Jan 08 '20 at 11:41

akhtarvahid

9,445
2
26
29

Thanks for your example. It is possible to change the hover background-color from blue in another color if I navigate from one option to another option? The default color is blue and i want to change this :) – Jan 08 '20 at 12:00

Problem when changing select option in another color

2 Answers2