Изменить Выбрать вариант Опция background color on hover

Можно ли изменить цвет фона по умолчанию для параметра выбора списка при наведении?Изменить Выбрать вариант Опция background color on hover

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

источник

2012-05-07 Gopesh

В некоторых браузерах это возможно, в других - нет. Обычно элементы формы отображаются операционной системой, а не браузером, поэтому CSS не всегда (или даже «редко») применяется. –

, в каких браузерах это возможно? – vipin8169

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

источник

2013-03-26 01:25:15 Priyesh

+26

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

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

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

Здесь .decorated класс присваивается поле выбора.

Надеюсь, у вас есть смысл.

источник

2013-11-07 11:19:06 user2964504

+11

+1 Отличная идея! Но 'option: checked' работает лучше, чем' option: hover'. Тем не менее, похоже, что они работают только на Firefox. – Oriol

Есть ли что-нибудь, что работает на хроме? – GumZ

Мой подход состоял в том, чтобы создать совершенно другой элемент, который вел себя как элемент «select». В основном div со списком внутри. – Diogo

-5

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

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

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

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

источник

2014-04-08 02:03:36 Dani

В Firefox стиль по умолчанию «option: checked {background-color: -moz-html-cellhighlight! Important; color: -moz-html-cellhighlighttext! important; } '. Тогда проблема заключается в том, что вы не можете переопределить внутреннее важное свойство, даже если вы используете! Important. – Oriol

Не работает в Chrome. – Lev

-2

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

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

источник

2014-12-24 15:56:59 Toasterdroid

Это не работает, просто потому, что фоновый цвет _gets перезаписан операционной системой. Это эквивалентно простому использованию опции: hover. Не совсем верно: ваш скрипт ломается, если я начинаю использовать клавиатуру, пока у меня есть указатель мыши над опцией, поэтому он не является надежным. – doppelgreener

Реализация врезке окно теневую CSS работает на Firefox:

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

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

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

источник

2015-10-20 09:38:05

не работает на хроме – deemi

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

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

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

источник

2015-10-31 00:39:05 mat3e

не работает на хромированном – deemi

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

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

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

источник

2018-01-22 05:48:58 John

Изменить Выбрать вариант Опция background color on hover

ответ

Смежные вопросы