Чистый CSS - стиль рамки выбора, когда выбор сделан

Question

После поиска в течение последних двух часов я должен добавить полотенце и задать вопрос сам.

Как мне оформить поле выбора, используя только CSS (не Javascript), чтобы, если выбор не имелбыло установлено, непрозрачность установлена ​​на .5, но как только выбор сделан, поле выбора становится непрозрачным 1?

Я вижу много вопросов и ответов об изменении определенных цветов опций и т. д., но я хочувлияет на весь сам блок выбора.Кажется, очень просто:

Ничего не выбрано?непрозрачность: .5;

Что-нибудь выбрано из выпадающего списка?opacity: 1;

Я не могу найти триггер, чтобы узнать, выбрано ли что-то, и да, я пробовал использовать: проверено на поле выбора и на опции.

Любая помощь была бы замечательной, но я думаю, что это ограничение самого CSS и не может быть сделано без вмешательства Javascript.Спасибо, ребята!

Answer 1

Это возможно только путем установки атрибута required на ваш выбор.Это работает, проверяя правильное значение этого выбора.Если вы выберете опцию с пустым значением, она будет помечена как недействительная.Вы можете сделать эту опцию скрытой и использовать в качестве заполнителя.Он исчезнет, ​​как только пользователь сделает выбор.

select:invalid
{
  opacity: 0.5; 
}

<select required>
  <option value="" selected disabled hidden>Please select an option</option>
  <option>123</option>
  <option>123</option>
  <option>123</option>
</select>