Как изменить цвет синей подсветки в раскрывающемся списке выбора окна

Как изменить синюю подсветку в этом выпадающем меню?

Здесь код: -

<html>
<head>
<title></title>

<style>
select { border:0; color:#EEE; background:transparent;
font-size:20px; font-weight:bold; padding:2px 10px; width:378px;
*width:350px; *background:#58B14C; -webkit-appearance: none; }

#mainselection { overflow:hidden; width:350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C; 
}
</style>

</head>
<body>

    <div id="mainselection">
    <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    </select>
    </div>
</body>
</html>

Я хочу изменить цвет выделения на серый, если это возможно.

Ответы

Ответ 1

Просто нашел это, ища решение. Я тестировал только FF 32.0.3

box-shadow: 0 0 10px 100px #fff inset;

Ответ 2

Да, вы могли бы изменить фон select, но вы не сможете изменить цвет подсветки (при наведении) с помощью CSS!

У вас есть несколько вариантов:

Преобразовать select в ul, li вид select и делать все, что вы хотите с этим.
Используйте библиотеки, такие как Выбрать, Select2 или jQuery Form Styler. Это позволяет вам создавать более широкий и кросс-браузерный способ.

Ответ 3

Я считаю, что вы ищете свойство CSS outline (в сочетании с активными и зависающими атрибутами psuedo):

/* turn it off completely */
select:active, select:hover {
  outline: none
}

/* make it red instead (with with same width and style) */
select:active, select:hover {
  outline-color: red
}

Полная информация о контурах, набросках, набросках и очертаниях https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Ответ 4

Чтобы как стиль цвета наведения, так и избежать цвета по умолчанию ОС в Firefox, вам нужно добавить тень окна как для опции выбора, так и для опции выбора: объявления наведения, установка цвета тени в окне "выбор" "на цвет фона меню.

select option {
  background: #f00; 
  color: #fff; 
  box-shadow: inset 20px 20px #f00
} 

select option:hover {
  color: #000; 
  box-shadow: inset 20px 20px #00f;
}

Ответ 5

Это работает для firefox и chrome, изящно возвращается к цвету системы в IE. Просто не забудьте установить свойство title для содержимого параметра. Он позволяет устанавливать цвета фона и переднего плана.

select option:checked:after {
    content: attr(title);
    background: #666;
    color: #fff;
    position: absolute;
    width: 100%;
    left: 0;
    border: none;
}