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

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

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

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

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

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

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

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

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

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

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

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

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

Написать комментарий

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

Выравнивание блока HTML (вертикально и горизонтально)

Сентябрь 17, 2015 г.

Центровка элемента - одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы. Горизонтальная центровка. С центровкой ...

Читать

Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)

Май 2, 2021 г.

В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, ...

Читать

 

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

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



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