Изменение цвета выделения <select>

Ответ 1

Не знаю, что вы имеете в виду под "цветом, выделяющим <li>", но похоже, что вы хотите изменить цвет фона элементов <option>. Я попробовал, и он не работает, вы всегда получаете цвет системы.

Если вы хотите выделить весь элемент <select> при наведении курсора мыши, этот вид работает:

select:hover { background-color: red; }

Однако в разных браузерах поведение отличается. Например, Chrome не выделяет опции в раскрывающемся списке; Firefox делает, но затем он не меняет их обратно, если вы отпустите мышь, и они все еще сняты.

Как было сказано на многих, многих похожих вопросах, вы не можете надежно управлять элементами формы. Подробнее см. здесь.

Ответ 2

Вы не можете изменить цвет подсветки опций через что-то вроде → background:#f9f9f9

Вы можете сделать что-то вроде этого:

            select > option:hover{
                box-shadow: 0 0 10px 100px #FED20F inset;
                transition: all .2s ease-in-out;
            }

Ответ 3

Как упоминалось выше, установка background-color будет работать, однако :hover не работает в IE7 - установка вашего типа doctype будет строгой.

Ответ 4

Так как никто еще не упомянул об этом, вот что я делаю. Это также относится к выбранному значению.

CSS:

option[selected], option:focus {
 background-color: red;
}

Ответ 5

Вы можете использовать псевдо-класс: hover

например,

.classOfElementToColor:hover {background-color:red; color:black}

Работает с большинством браузеров, но не со всеми элементами в IE6

Ответ 6

Просто используйте этот селектор CSS:

select option:hover {
    background-color: yellow;
}