Обнаружение, если <option>был выбран в <select>, используя CSS

Question

Я использую input:not(:placeholder-shown), чтобы определить, находится ли значение в поле ввода.

Есть ли какой-нибудь способ CSS проверить, был ли выбран <option /> в элементе <select>?

Вот пример:

<select class="form-control">
    <option></option>
    <option value="1">One</option>
</select>
<label>Pick One</label>

Вот CSS, который я хочу использовать, чтобы манипулировать, если была выбрана опция (со значением).

select.form-control:checked ~ label{
  color: red;
}

Answer 1

Да, псевдокласс :checked также предназначен для тегов <option>.

Пример:

option:checked { display:none; }

Источник:

http://www.w3.org/TR/selectors/#checked

EDIT:

Если вы хотите нацелить элемент за пределы вашего <select>, это можно сделать хакерским способом, манипулируя псевдоклассом :valid css. Обратите внимание, что атрибут required должен быть включен, чтобы тег <select> регистрировался как действительный / недействительный.

Пример:

body {
  background-color: #fff;
}

select:valid ~ label {
  background-color: red;
}

<select required>
  <option value="" selected>Please select an option</option>
  <option>1</option>
  <option>2</option>
</select>
<label>Please select an option</label>

Answer 2

Поскольку ваш элемент select не имеет атрибута multiple, опция не может быть выбрана в нем.(Да, ваш вариант без содержимого и без значения по-прежнему является параметром, его можно выбрать, и он выбран по умолчанию).

Если это так, то то, что вы хотите, все равно будет невозможно.Свойство :checked будет применяться к элементам <option>, но вы не можете использовать его для нацеливания на <select>, потому что CSS не имеет родительского селектора .