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>

Answer 1

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).

Answer 2

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>