Псевдоклассы состояния контейнера input

Хотелось бы выделить такой перечень css псевдоклассов и приемов работы с ними, который основан на состоянии элемента INPUT.

:checked псевдокласс

Позволяет писать стили для радио/чек — боксов, которые выделены (checked) в текущий момент.

Что делать, если нужно написать стили для прямо противоположного случая? Вот пара способов:

Или, используя ещё один полезный псевдокласс — :not

:disabled псевдокласс

Если INPUT элемент заблокирован (установлен флаг disabled), то для изменения внешнего вида элемента ваши css могут опираться на псевдокласс :disabled.

Практика использования

На практике, для полной кастомизации элементов вроде radio или checkbox прибегают к такому приему, как полная подмена элемента.

Прием заключается в том, что в верстке после input размещают тег label, который ссылается на связанное с ним поле input, но при этом сам input делают невидимым.

C помощью CSS можно «пробросить» состояния input, используя следующий синтаксис:

Внешний вид галочки верстается с помощью label контейнера. Чекбокс становится независимым от платформы, браузера, может иметь любой, требуемый дизайном вид.

Мало букафф? Читайте есчо !

Верстка: большой блок слева и четыре малых справа

Март 15, 2025 г.

Дизайнеры любят разные компоновки блоков, но не всегда удобно использовать таблицы для верстки, чтобы воплотить дизайн в HTML. Рассмотрим одну из компоновок, ...

Читать

100% высоты для дочернего flex контейнера

Сентябрь 10, 2024 г.

Flex опирается на другие принципы нежели блочные контейнеры, и иной раз не понятно какими свойствами управляется дочерний контейнер во flex родителе. Рассмотрим пример, когда у нас есть flex контейнер с двумя дочерними элементами. [crayon-68b09cc15ec32236938898/] ...

Читать

Эффект исчезновения/появления цветности CCS3

Апрель 7, 2017 г.

Среди простых, но эффектных способов оживить картинки на сайте есть следующий визуальный эффект, для которого нужны лишь CSS3 стили. Назовем его - "игра ...

Читать

Разрыв строки во flex

Март 6, 2024 г.

В общем случае, это может быть и "разрыв столбца", зависит от выбранного направления заполнения flex контейнера (задаётся свойством flex-direction). Суть проблемы в том, что иногда требуется прекратить заполнение вдоль выбранного направления и начать ...

Читать
 

Комментарии к «Псевдоклассы состояния контейнера input»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: