Пользовательские стили полей ввода с современным CSS

Пользовательские стили полей ввода с современным CSS

От автора: в наши дни вполне возможно создавать собственные чек-боксы, переключатели и радио-кнопки, сохраняя при этом семантичность и доступность. Нам даже не нужна ни одна строка JavaScript или дополнительные элементы HTML! На самом деле в последнее время это стало проще, чем когда либо. Давайте рассмотрим, как это делается.

Вот, что мы получим в конечном итоге:

Все, конечно, стало проще!

Причина заключается в том, что мы можем, наконец, стилизовать псевдо-элементы ::before и ::after для самого тега input. Это означает, что мы можем стилизовать input, и нам не понадобятся дополнительные элементы. Раньше нам приходилось применять div или span, чтобы реализовать индивидуальный дизайн.

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

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

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

Давайте посмотрим на HTML

Здесь нет ничего особенного. Мы можем стилизовать элемент ввода, используя такой простой HTML:

Вот и все, что касается HTML, но, конечно, рекомендуется задавать атрибуты name и id, а также соответствующий элемент label:

Начальные стили

Прежде всего, мы проверяем поддержку appearance: none;, в том числе и через вендорные префиксы. Свойство appearance является ключевым, так как оно предназначено для удаления стиля браузера по умолчанию. Если свойство не поддерживается, стили не будут применены, и будут отображаться стили элементов ввода по умолчанию. Это хороший пример прогрессивного улучшения.

На сегодняшний день appearance — это рабочий проект, но вот как выглядит поддержка. Данные о поддержке браузерами взяты с Caniuse, где вы можете найти более подробную информацию. Число указывает, что браузер поддерживает функцию в этой версии и выше.

Пользовательские стили полей ввода с современным CSS

Как и в случае ссылок, мы должны рассматривать различные интерактивные состояния элементов формы. Мы учтем это при стилизации:

:checked

:hover

:focus

:disabled

Например, вот как мы можем стилизовать наш переключатель и учесть состояние :checked:

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

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

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

Мы используем элемент input как контейнер. Тумблер внутри элемента ввода создается с помощью псевдо-элемента ::after. Опять же, больше не нужна для этого дополнительная разметка!

Если вы откроете стили в демонстрационной версии, то увидите, что мы определяем некоторые пользовательские свойства CSS, потому что это стало удобным способом управления повторно используемыми значениями в таблице стилей:

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

Для доступности мы должны добавить собственный стиль фокуса. Мы удаляем обводку по умолчанию, потому что она не может быть закруглена, как и остальные вещи, которые мы стилизуем. Но с помощью радиуса границы вместе с тенью мы можем создать стиль, который работает как обводка.

Также возможно выровнять и стилизовать элемент label, который в HTML следует непосредственно за элементом input:

Надеюсь, вы оценили, как хорошо в наши дни создавать собственные стили элементов форм. Благодаря псевдо-элементам для этого теперь требуется меньше разметки. Это требует менее сложного переключения стилей, благодаря пользовательским свойствам. И это чертовски хорошо поддерживается браузерами, благодаря @supports.

В целом, это гораздо более приятный опыт разработки, чем мы имели в прошлом!

Автор: Aaron Iker

Источник: //css-tricks.com

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

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

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

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

PSD to HTML

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

Смотреть

Метки:

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

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

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