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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как делаются сайты с адаптивным дизайном?

Апрель 7, 2016 г.

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

Читать

Кол-во знаков после запятой при генерации css препроцессором sass

Март 28, 2018 г.

В одном из проектов использовался SASS, но оказалось, что у другого разработчика другие настройки SASS. И конечные CSS генерировались с числами другой точности (другое кол-во знаков после запятой). Любое изменение в файле приводило к огромному ...

Читать

 

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

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



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