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

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

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

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

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

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

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

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

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

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

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

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

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

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

Квантование ширины: способ балансировать текст в кнопках на CSS

Сентябрь 25, 2025 г.

Иногда кнопки на сайте содержат очень разный по длине текст. С коротким текстом всё просто: он помещается в одну строку и выглядит аккуратно. Но как только ...

Читать

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

Март 6, 2024 г.

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

Читать

Верстка слоя-подкладки во всю ширину viewport

Апрель 16, 2019 г.

В лендинговой верстке дизайнеры часто прибегают к следующему приему - фон одного или нескольких блоков растягивается на всю ширину документа. При этом ...

Читать

Убираем подсветку поля при фокусе ввода в Chrome

Май 18, 2018 г.

В браузерах на движке chromium (Chrome, Opera) по умолчанию есть "подсветка" поля, получившего фокус ввода. Смотрим как убрать данный стиль. Давайте ...

Читать
 

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

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



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