HTML <select>выбранная опция цвет фона CSS стиль - PullRequest
25 голосов
/ 08 марта 2010

Есть ли стиль для "выбранного" цвета выбранной опции? Например:

<HTML>
<BODY>
<FORM NAME="form1">
<SELECT NAME="mySelect" SIZE="7" style="background-color:red;">
<OPTION>Test 1
<OPTION>Test 2
<OPTION>Test 3
<OPTION>Test 4
<OPTION>Test 5
<OPTION>Test 6
<OPTION>Test 7
</SELECT>
</FORM>
</BODY>
</HTML>

Когда я выбираю опцию, она становится синей, я хочу переопределить это и сделать это другим цветом. В стиле я ожидал что-то вроде "выбранный цвет", но он не существует.

Ответы [ 10 ]

16 голосов
/ 08 марта 2010
Возможно, вы не сможете сделать это с помощью чистого CSS. Но немного JavaScript может сделать это приятно.

Грубый способ сделать это -

var sel = document.getElementById('select_id');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i < this.childElementCount; i++){
        options[i].style.color = 'white';
    }
    var selected = this.children[this.selectedIndex];
        selected.style.color = 'red';
    }, false);
14 голосов
/ 10 апреля 2011
<select name=protect_email size=1 style="background: #009966; color: #FFF;" onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">    
<option value=0 style="background: #009966; color: #FFF;" selected>Protect my email</option>;  
<option value=1 style="background: #FF0000; color: #FFF;">Show email on advert</option>;
</select>; 

http://pro.org.uk/classified/Directory?act=book&category=120

Протестировал его в FF, Opera, Konqueror работал нормально ...

5 голосов
/ 08 марта 2010

Вы не можете полагаться на CSS для элементов формы. Результаты сильно различаются во всех браузерах. Я не думаю, что Safari позволяет настраивать любые элементы формы вообще.

Лучше всего использовать такой плагин, как jqTransform (использует jQuery).

РЕДАКТИРОВАТЬ: эта страница, кажется, не работает в данный момент. Также есть Пользовательские элементы формы , которые поддерживают MooTools и могут поддерживать jQuery в будущем.

2 голосов
/ 06 февраля 2017

Я думаю, что решение, которое вы, возможно, искали:

option:checked {
  box-shadow: 0 0 10px 100px #FFFF00 inset; }
2 голосов
/ 26 сентября 2012

Этот синтаксис будет работать в XHTML и не работает в IE6, но это не JavaScript-способ:

option[selected] { background: #f00; }

Если вы хотите сделать это на лету, то вам придется использовать javascript, как предлагали другие ....

2 голосов
/ 08 марта 2010

В настоящее время CSS не поддерживает эту функцию.

Вы можете создать свой собственный или использовать плагин, который имитирует это поведение, используя DIVs / CSS

0 голосов
/ 15 августа 2016

Я понимаю, что это старый пост, но в случае, если он поможет, вы можете применить этот CSS, чтобы IE11 рисовал пунктирный контур для индикации фокуса элемента <select>, чтобы он напоминал индикацию фокуса в Firefox: select:focus::-ms-value { background: transparent; color: inherit; outline-style: dotted; outline-width: thin; }

0 голосов
/ 25 ноября 2015

Мы можем переопределить синий цвет в наш собственный цвет Работает для Internet Explorer, Firefox и Chrome:

Используя это ниже, CSS:

option: checked, option: hover {
    Color: #ffffff;
    background: #614767 repeat url("data:image/gif;base64,R0lGODlh8ACgAPAAAGFGZQAAACH5BAAAAAAALAAAAADwAKAAAAL+hI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJFCtavIhRVgEAOw");
}
0 голосов
/ 23 февраля 2015

В CSS:

ВЫБРАТЬ ВАРИАНТ: проверено {background-color: red; }

0 голосов
/ 19 февраля 2011

В принципе, вы можете стилизовать его, используя параметр [selected] в качестве селектора, но это не работает во многих браузерах. Кроме того, это позволяет только стилизовать выбранный параметр, а не параметр, который имеет фокус при наведении.

Протестировано для работы в Chrome 9 и Firefox 3.6, не работает в Internet Explorer 8.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...