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

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

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

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

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

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

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

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

Я почти уверен, что для этого вам понадобится JS

— 18.05.2018 19:32

css

18.05.2018 19:28

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

120

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Это именно тот угол, который мне нужен. Единственная загвоздка, которую я мог предвидеть, - это то, если вы действительно не хотите, чтобы параметры выбора требовались для отправки формы. Но для моих целей это было идеально, и я заставил его работать именно так, как я хотел. Большое спасибо!

— 18.05.2018 23:30

18.05.2018 21:53