Вопрос по html, drop-down-menu, css – Изменить цвет фона списка выбора при наведении

45

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

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; }, но это бесполезно. Кто-нибудь знает, как это сделать?

в каких браузерах это возможно? vipin8169
В некоторых браузерах это возможно, в других - нет. Обычно элементы формы визуализируются ОС, а не браузером, поэтому CSS не всегда (или даже редко) применяется. David Thomas

Ваш Ответ

7   ответов
1

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

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
2

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

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

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

34

например:

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

Вот,.decorated класс, назначенный для поля выбора.

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededoption:checkedError: User Rate Limit Exceededoption:hoverError: User Rate Limit Exceeded
9

а не HTML. Вы не можете изменить стиль для этих элементов.

Это довольно старый вопрос. Если вы собираетесь добавить ответ на этом этапе, хотя бы уточните или поддержите его ссылкой ...
-5

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

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

Вот ссылка:http://www.w3schools.com/css/css_combinators.asp

Error: User Rate Limit Exceededoption:checked { background-color: -moz-html-cellhighlight !important; color: -moz-html-cellhighlighttext !important; }Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
-3

что это старый вопрос, но недавно я столкнулся с этой необходимостью и предложил следующее решение с использованием 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;
}

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

Error: User Rate Limit Exceededgets overwrittenError: User Rate Limit Exceededoption:hoverError: User Rate Limit Exceeded
4

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

Проверенная опция работает в Chrome:

select:focus > option:checked { 
    background: #000 !important;
}
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы