Стиль на основе выбранного

Можно ли select элемент select на основе того, какой option выбран только с помощью CSS? Я знаю о существующих решениях JavaScript .

Я попытался создать стиль элемента option, но это даст стиль только элементу опции в списке параметров, а не выбранному элементу.

 select[name="qa_contact"] option[value="3"] { background: orange; } 

http://jsfiddle.net/Aprillion/xSbhQ/

Если это невозможно с помощью CSS 3, будет ли в будущем помощь селектора CSS 4 – или это останется запретным для CSS?

2 Solutions collect form web for “Стиль на основе выбранного”

К сожалению, да – это то, что в настоящее время невозможно с помощью только CSS. Как упоминалось в ответах и ​​комментариях к этому вопросу , в настоящее время нет способа заставить родительский элемент получать стилирование на основе его дочерних элементов.

Чтобы делать то, что вы хотите, вам, по существу, нужно будет определить, какой из детей ( ) выбран, а затем соответствующим образом начертить родителя.

Однако вы могли бы выполнить это с помощью очень простого вызова jQuery следующим образом:

HTML

  

JQuery

 var $select = $('select'); $select.each(function() { $(this).addClass($(this).children(':selected').val()); }).on('change', function(ev) { $(this).attr('class', '').addClass($(this).children(':selected').val()); }); 

CSS

 select, option { background: #fff; } select.foo, option[value="foo"] { background: red; } select.bar, option[value="bar"] { background: green; } 

Вот рабочий jsFiddle .

Вернемся к вопросу о будущем селекторов. Да – селектор «Тема» предназначен для того, чтобы делать то, что вы упоминаете. Если / когда они когда-либо будут жить в современных браузерах, вы можете адаптировать приведенный выше код к:

 select { background: #fff; } !select > option[value="foo"]:checked { background: red; } !select > option[value="bar"]:checked { background: green; } 

В качестве примечания, по-прежнему существуют споры о том, есть ли ! должен идти до или после предмета. Это основано на стандарте программирования !something означает «не что-то». В результате на основе CSS может фактически выглядеть так:

 select { background: #fff; } select! > option[value="foo"]:checked { background: red; } select! > option[value="bar"]:checked { background: green; } 

Итак, вот что я нашел, когда это возможно . Самая большая проблема заключается в том, что после того, как вы выбрали элемент, цвет фона не изменится, потому что элемент выбора фактически не перерисовывается (кажется более превалирующим в IE – go figure). Поэтому, даже если вы выбираете другой вариант, этот параметр не отображается в списке при повторном нажатии элемента выбора.

Чтобы устранить проблемы перерисовки в IE, потребовалось изменить font-size на минимальную сумму + -. 1. Другая вещь, которая, похоже, не хорошо документирована, заключается в том, что псевдоclass :checked также работает с элементами выбора.

Скрипач, чтобы показать добавленный css, который делает это возможным.

Я только кратко играл с ним в Chrome и IE9, fyi.

EDIT: Очевидно, вам нужно будет установить значение [value = “x”] на нужное значение для выделения определенной опции.

Давайте будем гением компьютера.