Сохранить цвет фона формы, выберите выпадающий при нажатии на форму

Question

Я настроил выпадающий список.

<select name="country">
      <option value="Andorra">Andorra</option>
      <option value="Albania">Albania</option>
      <option value="Armenia">Armenia</option>
      <option value="Austria">Austria</option>
</select>

Со следующим CSS

select {
   display: none;
}

select {
   width: 8em;
   font-family: Segoeui;
   font-size: 28px;
   padding: 5px 5px;
   margin: 5px;
   display: inline-flex;
   font-weight: 300;
   outline: none;
   position: relative;
   background: #ccc;
   color: white;
   border-radius: 8px;
}

select:hover{
   background: #eb4410;
}
select:focus{
   background: #eb4410;
}
select option:selected{
   background: #eb4410; !important
}

Он работает так, как я хочу:

Перед наведением курсора.

При наведении на

При выборе:

Ключевая проблема заключается в том, что когда я теперь щелкаю где-то еще на экране, цвет фона меняется на свой первоначальный цвет.

т.е.

При нажатии на выпадающий список.

У меня вопрос в 2 раза.

1) Когда я выбираюиз выпадающего списка появляется стандартный синий цвет опции, над которой я нахожусь в данный момент (см. выше «При наведении курсора»).Как мне поменять этот цвет?

2) Как я могу получить флажок, чтобы сохранить его оранжевый цвет фона после того, как я выбрал элемент, затем щелкните по раскрывающемуся списку (пожалуйста, «При нажатии на раскрывающийся список»)."выше)?

Я надеюсь, что смогу решить эту проблему, просто используя CSS.

Спасибо

Answer 1

Добавьте это к вашему css:

select:not(:focus){
  background: #eb4410;  
}

Этот ответ на ваш вопрос о том, как сохранить цвет фона, когда селектор теряет фокус.

Изменить стиль<option> элементов.Они отображаются вашей ОС, а не кодом HTM1 или CSS.