Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
У меня есть два набора входов и кнопок здесь.
Они оба находятся в состоянии по умолчанию «включено», которое мы можем продемонстрировать, стилизуя их с помощью псевдокласса :enabled
Если я теперь добавлю атрибут disabled:enabled Мы можем управлять стилизацией отключенных входов в CSS с помощью псевдокласса :disabled
Случай использования
Давайте посмотрим на реальный пример использования.
Здесь у нас есть шаг оплаты за заказ еды онлайн. На этом этапе формы запрашивается способ оплаты, и вы можете выбрать наличные или карту.
Если мы хотим оплатить картой, поля для держателя карты, номер карты, дата начала, срок действия и код безопасности включены. Если мы хотим расплатиться наличными, эти данные не нужны, и мы можем их отключить. Этого нельзя сделать только с помощью CSS, но мы можем использовать немного JavaScript или jQuery для управления взаимодействием.
Когда мы меняем способ оплаты, скрипт проверяет, установлен ли переключатель с идентификатором наличных денег :checked Это еще один псевдокласс, который определяет состояние — в данном случае состояние флажка или флажка или переключателя. Если наличные проверены, мы добавляем атрибут disabled Мы также добавляем в ярлыки класс is-disabled
Затем мы можем стилизовать их в CSS, сделав цвет текста и фона входных данных светло-серым, чтобы показать, что они больше не включены.
Следите за нашей статьей Quick Tip в ближайшее время!