Продвинутая стилизация форм на чистом CSS

Продвинутая стилизация форм на чистом CSS

От автора: все знают, как работает стилизация формы CSS. Однако существуют редко используемые селекторы, с помощью которых можно стилизовать поля ввода и окружающие элементы. Некоторые из них довольно новые, другие же доступны уже некоторое время.

Живое демо.

placeholder-shown

Продвинутая стилизация форм на чистом CSS

Первый селектор новый и пока что не обладает полной поддержкой в браузерах. Но его легко можно использовать с техникой прогрессивного улучшения. Селектор позволяет определять видимость плейсхолдера для пользователя в данный момент времени. Может быть полезно для динамического скрытия и отображения лейбла поля ввода.

В демо выше я прячу лейбл, пока пользователь не начнет вводить текст, после чего прячется плейсхолдер. Лейбл показывается с помощью прикольного плавного перехода. Чтобы демо выше работало, лейбл должен идти ПОСЛЕ поля ввода.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

required

Продвинутая стилизация форм на чистом CSS

Используйте этот селектор для индикации обязательного поля (атрибут required). Я использую пустой span .help-text и динамически размещаю контент с помощью псевдоэлемента ::before. Это можно было сделать на JS, однако я показываю подход на чистом CSS.

optional

Продвинутая стилизация форм на чистом CSS

Противоположность :required. Я опять использую пустой span .help-text для показа необязательного текста, если атрибута required НЕТ.

disabled

Продвинутая стилизация форм на чистом CSS

Селектор должен быть знаком большинству. Однако о нем нельзя забывать. Очень важно показывать пользователю, активно поле или нет.

read-only

Продвинутая стилизация форм на чистом CSS

Поле с атрибутом readonly имеет немного другой смысл, в отличие от disabled. К счастью, у нас есть этот селектор.

valid

Продвинутая стилизация форм на чистом CSS

Большая часть валидаторов форм написана на JS, однако мы можем воспользоваться валидацией форм HTML5 и стилизовать соответственно поля. Селектор позволяет стилизовать любое поле, проходящее правила валидации браузера.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Ниже я кодирую svg для отображения чекбокса в поле ввода с помощью свойства background-image.

invalid

Продвинутая стилизация форм на чистом CSS

Селектор проверяет поле на НЕПРОХОЖДЕНИЕ правил валидации браузера (например, если поле email не содержит электронную почту).

Здесь я кодирую svg для отображения «х» в поле ввода.

Я также могу настроить сообщения валидации для каждого типа поля с помощью span .help-text и псевдоэлемента ::before.

in-range/:out-of-range

Продвинутая стилизация форм на чистом CSS

Селекторы определяют, входит ли введенное число в диапазон min/max или нет.

checked

Продвинутая стилизация форм на чистом CSS

Большинство должны знать этот селектор. С его помощью можно применить кастомную стилизацию к чекбоксам и радио кнопкам, когда они активны. Моя техника стилизации чекбоксов включает создание элемента-обертки и размещение label после input.

Я визуально прячу input, чтобы он исчез, но оставался кликабельным. Далее я стилизую label::before под чекбокс и label::after под галку. С помощью :checked я стилизую оба псевдоэлемента:

Знакомство с фреймворком Hi-Q

В моем CSS фреймворке Hi-Q есть парочка полезных стилей для полей, в том числе и чекбоксов, радио кнопок и отключенных полей. С помощью theme builder вы можете визуально следить за изменениями. theme builder – легковесный фреймворк, построенный на CSS переменных, которые можно динамически изменять. Удобно для переключения тем.

Автор: Jonathan Harrell

Источник: https://jonathan-harrell.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree