HTML <select> выбранный вариант background-color CSS style

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

<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>

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

Ответ 1

Возможно, вы не сможете сделать это, используя чистый 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);

Ответ 2

<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 отлично справился...

Ответ 3

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

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

EDIT: эта страница, похоже, не работает в данный момент. Существует также Custom Form Elements, который поддерживает MooTools и может поддерживать jQuery в будущем.

Ответ 4

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

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

Ответ 5

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

option[selected] { background: #f00; }

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

Ответ 6

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

option:checked {
  box-shadow: 0 0 10px 100px #FFFF00 inset; }

Ответ 7

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

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

Ответ 8

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

Ответ 9

В CSS:

ВЫБОР ВАРИАНТА: отмечено {background-color: red; }

Ответ 10

Мы можем переопределить синий цвет в нашем пользовательском цвете Он работает в 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");
}