Стиль <select> на основе выбранного <option>

Ответ 1

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

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

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

HTML

<select>
  <option value="foo">Foo!</option>
  <option value="bar">Bar!</option>
</select>

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

Ответ 2

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

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

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

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

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

Ответ 3

Минималистское решение

У этого нет JS-зависимости (вам не нужен jQuery или что-то еще), это одна строка кода для события изменения, просто присваивание, которое извлекает значение в набор данных DOM. Кроме того, в производственной версии вы можете добавить data-chosen="something" к вашему выбору, чтобы установить опцию по умолчанию. Но есть случаи, когда это даже не нужно.

Все, что мы здесь делаем, - информируем элемент select о текущей опции. CSS может справиться с остальным.

    <select onchange=" this.dataset.chosen = this.value; ">
        ...
        ...
    </select>

Таким образом, вы уже можете прикрепить стили CSS для своих значений, например так:

select[data-chosen='opt3'] { 
    border: 2px solid red;
}

Смотрите на CodePen.

Примечание: это не обязательно должно быть слово "выбрано", используйте любое другое, если выбранные данные уже выделены для какой-то другой цели. Дело в том, чтобы получить значение.