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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вставка переменной в инлайновое изображение в LESS

Август 29, 2019 г.

Небольшие векторные элементы очень удобно вставлять как часть CSS кода. Хочу показать пример, как сделать их еще и параметрически зависимыми, при компиляции из LESS. К примеру, при ребрендинге или использовании кусочка стилей на другом сайте, вы ...

Читать

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

Апрель 16, 2019 г.

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

Читать

 

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

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



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