Изменить цвет списка Выбор цвета фона при наведении

Можно ли изменить цвет фона по умолчанию для опции списка выбора при наведении?

HTML:

<select id="select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Я пробовал option:hover { background-color: red; }, но это бесполезно. Кто-нибудь знает, как это сделать?

Ответы

Ответ 1

Это можно сделать, реализовав тень вставки. например:

select.decorated option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
}

Здесь .decorated - это класс, назначенный в поле выбора.

Надеюсь, вы поняли.

Ответ 2

Элементы Select/Option отображаются операционной системой, а не HTML. Вы не можете изменить стиль для этих элементов.

Ответ 3

Реализация теней CSS для вставных блоков работает в Firefox:

select option:checked,
select option:hover {
    box-shadow: 0 0 10px 100px #000 inset;
}

Пункт с проверенным вариантом работает в Chrome:

select:focus > option:checked { 
    background: #000 !important;
}

Есть тест на https://codepen.io/egle/pen/zzOKLe

Для меня это работает на Гугл Хром Версия 76.0.3809.100 (Официальная сборка) (64-разрядная версия)

Ответ 4

Проблема в том, что даже JavaScript не видит элемент option, находящийся в движении. Это просто для того, чтобы подчеркнуть, что это не будет решено (по крайней мере, в ближайшее время) с помощью только CSS:

window.onmouseover = function(e)
{
 console.log(e.target.nodeName);
}

Единственный способ решить эту проблему (кроме того, что многие поставщики браузеров ждут исправления ошибок, не говоря уже о тысячелетиях), не говоря уже о том, что мешает работе, вы можете заменить раскрывающееся меню собственным HTML/XML, используя JavaScript. Скорее всего, это будет связано с заменой элемента select на элемент ul и использованием элемента radio input на элемент li.

Ответ 5

В FF фильтр CSS работает отлично. Например. Оттенок поворота:

option {
    filter: hue-rotate(90deg);
}

https://jsfiddle.net/w3a740jq/4/

Ответ 6

Я понимаю, что это старый вопрос, но я недавно столкнулся с этой проблемой и придумал следующее решение, использующее jQuery и CSS:

jQuery('select[name*="lstDestinations"] option').hover(
        function() {
            jQuery(this).addClass('highlight');
        }, function() {
            jQuery(this).removeClass('highlight');
        }
    );

и css:

.highlight {
    background-color:#333;
    cursor:pointer;
}

Возможно, это помогает кому-то другому.

Ответ 7

это то, что вам нужно, дочерний комбинатор:

    select>option:hover
    {
        color: #1B517E;
        cursor: pointer;
    }

Попробуйте, отлично работает.

Здесь ссылка: http://www.w3schools.com/css/css_combinators.asp