Полное руководство по стилям форм

В сегодняшней статье мы расскажем вам, как стандартизировать процесс создания форм. А также предоставим несколько простых фрагментов стилей для input CSS , которые помогут вам сделать то же самое.

Начинаем со сброса HTML5

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

Чаще всего мы используем Normalize.css . Это идеальное сочетание простоты в использовании и качества.

Общие стили CSS формы

Поля ввода будут работать без стилей CSS . Они будут выглядеть ужасно, но они будут работать.

Но заставить их работать – это лишь полдела. Чтобы задать стили так, чтобы все выглядело красиво, может потребоваться много времени и труда. Хорошая новость заключается в том, что мы сделали большую часть тяжелой работы за вас. Взгляните на приведенные ниже стили для CSS input type text :

Сокращение

Если вы заметили, мы добавили отдельные правила для различных элементов CSS input type . Способ упростить это, который вы могли видеть во многих темах WordPress , заключается в том, чтобы сделать что-то вроде этого:

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

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

Мы управляем CSS, а CSS управляет нами

Стили фокуса ввода и состояния hover делают дизайн более приятным. Сколько раз вы слышали, что все зависит от деталей? Разница от добавления этих стилей ( в том числе и для CSS input file ) будет невелика, но это значительно улучшит общий опыт взаимодействия.

Углубляемся все дальше: добавляем стили для диапазона, чекбокса, списка и радиокнопки

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

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

В любом случае, это « Полное руководство », и оно не могло бы считаться таковым, если бы мы упустили этот аспект:

Если вы заметили, в строках 2-4 приведенного выше кода содержится именно то, что помогает нам подчинить это поле нашей воле. Магическое свойство appearance .

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

После этого нам нужно сконцентрироваться на указателе ( та часть, которую вы перетягиваете ) и треке ( слайдере ), и браузеры будут использовать собственные вендорные префиксы. Мне нравится использовать range.css , но вам нужно протестировать его в разных браузерах и их версиях.

Стили поля со списком

Поле CSS input type со списком на протяжении многих лет оставалось тем камнем, о который разбивался наш дизайн и кроссбраузерная совместимость. Предлагалось много решений, в том числе создавались целые библиотеки Javascript . Но самый простой способ, который нашел я, заключается в добавлении всего нескольких строк CSS :

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

И это все. Мы снова используем свойство appearance. Различные браузеры по- разному определяют оформление input CSS кнопки переключателя. Чтобы решить данную проблему, можно добавить аккуратное фоновое изображение, которое будет работать в качестве переключателя.

Используйте SVG для изображения. Дополнительным преимуществом этого формата является то, что он, как правило, имеет меньший размер, чем обычный JPG или PNG .

Пользовательские стили CSS для чекбокса и радиокнопки

Здесь важно совместить структуру дерева DOM и эти элементы. Возможно, вам придется изменить правила CSS или структуру DOM , чтобы все работало правильно. Но уделив немного внимания деталям, вы сможете сделать это. И вы не пожалеете о потраченном времени:

Мы снова используем SVG-изображения для отображения чекбоксов и радиокнопок, а также их различных состояний. Изменив отступы, поля и непрозрачность в первых строках приведенного выше кода, мы избавляемся от стилей браузера по умолчанию. В следующих строках мы используем трюк, размещая изображения там, где они нам нужны.

Плагины WordPress для добавления стилей форм

Теперь у нас есть понимание того, что нужно сделать, чтобы задать стили для input CSS . До сих пор мы использовали их только в условиях, при которых у нас есть полный контроль: статический HTML . Если вы готовы не останавливаться на этом, и хотите знать, как задать стили форм в WordPress , я расскажу и об этом.

Только не это!

Мы используем плагины, потому что создание форм в HTML — это очень трудоемкий процесс. Эти плагины обычно содержат свои стандартные стили. Это делается для того, чтобы формы выглядели одинаково хорошо не только в различных браузерах, но и с различными темами, которые будут использоваться на сайте. Давайте рассмотрим в качестве примера популярный плагин Gravity Forms .

Итак, мы добавили пользовательские стили для наших полей ввода формы, а теперь хотим установить на сайте еще и Gravity Forms , как я сделал здесь .

Вам придется внести сразу несколько изменений. Особенно это касается поля со списком, чекбокса и радиокнопки, чтобы все выглядело нормально. Вот, что сделал я для оформления input CSS :

Я удалил изображение, которое мы использовали для списка, а также внес некоторые незначительные изменения для чекбокса и радиокнопки. У нас больше нет контроля над деревом DOM , так как Gravity Forms делает это за нас, поэтому некоторые незначительные корректировки необходимы.

Еще одна причина внести эти изменения заключается в том, что мы загружаем стили, которые поставляются с плагином форм. Но если мы решили не делать этого и хотим использовать только наши CSS input type ?

Пользовательские стили CSS для Gravity Forms

Первое, что нам нужно сделать, это отключить стили front-end Gravity Forms . Вот фильтр, который вы можете поместить в файл functions.php :

Затем можно начать задавать собственные стили для вашей конкретной темы. Это долгий и утомительный процесс. У нас есть вариант взять стили, которые мы создали для использования с нашей основной темой, но они также будут работать с другими Sass-темами WordPress . Посмотрите наши SCSS-файлы для Gravity Forms . Если SCSS не ваш конек, вы можете посмотреть CSS-версию .

Стили формы подписки на новостную рассылку

Вы можете применить методы, описанные в этой статье для настройки других плагинов форм WordPress , но я работал именно с плагином Gravity Forms .

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

Если вы создаете форму самостоятельно, вам нужно добавить в нее класс newsletter-signup . Я использовал этот класс, чтобы указать конкретную форму как в CSS , так и в JQuery , который мы будем использовать.

Вот правила для input CSS , которые необходимо задать:

В форме из нашего примера используется кнопка для запуска анимации в верхней части, но мы не имеем к этому доступа. Gravity Forms не выводит заголовок, поэтому мы можем использовать это. Мы разместили там элемент со input CSS стилями gform_title , который будет выглядеть как кнопка. Кроме этого мы установили для формы значение line-height , как у этой псевдокнопки. Это позволит нам скрыть форму до тех пор, пока кто-то не кликнет по ней мышью.

Следующий фрагмент головоломки — JQuery :

Все, что делает этот код — проверяет, есть ли на этой странице конкретная форма, а затем проверяет, существует ли заголовок. Если оба этих условия выполняются, то он просто ждет, когда кого-то кликнет по заголовку. После того, как это произойдет, он добавляет класс open для контейнера формы и устанавливает настоящую высоту формы. Фактическая анимация задается правилами оформления input CSS , которые мы использовали ранее.

Вы можете либо добавить скрипты в файлы вашей темы, либо просто поместить их в новый файл. Если вы выберете второй путь, то нужно будет поставить скрипты в очередь загрузки темы. Вот код, который нужно добавить в файл functions.php :

Хотите увидеть форму, которую мы только что создали, в действии? Зайдите сюда !

Это, безусловно, полное руководство по стилям CSS input type . На данный момент у вас есть базовые знания и множество примеров кода, которые помогут создать и настроить свою собственную форму.

Стилизуем формы при помощи CSS: руководство для начинающих

Перевод статьи «How to style forms with CSS: A beginner’s guide».

Приложения получают данные от пользователей, в основном, через формы. Возьмем для примера обычную форму регистрации. Там всегда будет несколько полей, куда пользователь может ввести нужную информацию (свое имя, email и т. д.).

Раньше на сайтах были простые, скучные HTML-формы без всякой стилизации. Но с появлением CSS все изменилось. Благодаря новейшим свойствам CSS мы сейчас можем создавать куда более интересные и красивые формы.

И это не мое личное мнение. На иллюстрации ниже вы видите, как выглядит обычная HTML-форма без CSS.

А вот та же форма, в оформлении которой использовали каскадные таблицы стилей.

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

Наше руководство по стилизации форм при помощи CSS будет состоять из шести пунктов.

1. Определение размеров формы (box-sizing).
2. Селекторы CSS для элементов ввода (input).
3. Базовые методы стилизации для текстовых полей ввода.
4. Стилизация прочих полей ввода.
5. Псевдоклассы UI.
6. Элементы ввода, недоступные для кастомизации.

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

1. Устанавливаем box-sizing

Я обычно устанавливаю * не только для форм, но и для веб-страниц. Благодаря этому ширина (width) всех элементов будет содержать внутренние отступы (padding).

Ширина .some-class без box-sizing:border-box будет больше 200px, что может стать проблемой. Поэтому большинство разработчиков используют border-box для всех элементов.

Ниже приведена улучшенная версия нашего первоначального кода. В нее также добавлены псевдоэлементы :before и :after.

Совет: универсальный селектор * выбирает все элементы в документе.

2. Селекторы CSS для элементов ввода

Самый простой способ выбрать элементы ввода — использовать селекторы атрибутов.

Эти селекторы будут выбирать все элементы ввода в документе. Если вам нужно выбрать какие-то специфические селекторы, следует добавить классы:

3. Базовые методы стилизации для однострочных текстовых полей ввода

Чаще всего поля ввода в формах бывают однострочными. Обычно такое поле представляет собой простой блок с границей (его вид зависит от браузера).

Вот HTML-разметка для однострочного текстового поля с плейсхолдером.

Выглядеть это будет так:

Чтобы сделать это текстовое поле более привлекательным, можно использовать следующие свойства CSS:

• Padding (внутренние отступы)
• Margin (внешние отступы)
• Border (граница)
• Box shadow (тень блока)
• Border radius (для скругления границ)
• Width (ширина)
• Font (шрифт)

Давайте пройдемся по каждому из этих свойств.

Padding

Добавление некоторого внутреннего пространства может повысить четкость. Чтобы это сделать, применяем свойство padding.

Margin

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

Border

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

Совет: если убираете границу, обязательно добавьте цвет фона или тень. В противном случае пользователь просто не увидит ваше поле.

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

Box shadow

Свойство CSS box-shadow позволяет добавить тень элемента. Меняя 5 значений этого свойства, вы сможете добиться самых разнообразных эффектов.

Border radius

Свойство border-radius может очень сильно изменить вид ваших форм. Поля для ввода текста, имеющие скругление углов, выглядят совсем иначе.

Комбинируя box-shadow и border-radius, вы можете существенно изменить вид полей.

Width

Используйте свойство width, чтобы установить ширину поля ввода.

Большинство браузеров используют разные семейства шрифтов и размер шрифта для элементов форм. Если необходимо, можно установить наследование шрифта от документа.

4. Стилизация прочих типов полей ввода

Вы также можете прописывать стили и для других полей — области текста, радиокнопок, чек-боксов и пр.

Давайте рассмотрим подробнее каждое из них.

Текстовые области (text areas)

Текстовые области напоминают однострочные текстовые поля ввода, с той лишь разницей, что здесь пользователь может ввести не одну строку текста. Обычно они используются, если нужно принимать более «многословные» данные: комментарии, сообщения и т. п. Для стилизации этих областей вы можете использовать все свойства, о которых мы говорили ранее.

Также для текстовых областей применимо и очень полезно свойство resize. В большинстве браузеров текстовые области по умолчанию могут растягиваться как по оси x, так и по оси y (значение: both). Но вы можете установить для этого свойства также значение horizontal или vertical.

Посмотрите на пример:

Здесь я использовал resize:vertical, чтобы разрешить изменение размера исключительно по вертикали. Такая практика применяется в большинстве форм, поскольку позволяет избежать появления горизонтальной полосы прокрутки.

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

Чекбоксы и радиокнопки

Дефолтные чекбоксы и радиокнопки очень сложно стилизовать, для этого требуется более сложный CSS-код (и HTML — тоже).

Для стилизации чекбокса используйте следующий HTML-код.

Несколько вещей, на которые нужно обратить внимание:

• Поскольку мы используем в качестве обертки для , если вы кликнете на любой элемент внутри , «кликнутым» будет .
• Мы спрячем , потому что браузеры практически не позволяют нам его модифицировать.
• создает пользовательский чекбокс.
• Чтобы получить положение «отмечено» и стилизовать пользовательский чекбокс, мы будем использовать псевдокласс input:checked.

Вот пользовательский чекбокс (комментарии в CSS-коде поясняют происходящее более подробно):

See the Pen yLNKQBo by Supun Kavinda (@SupunKavinda) on CodePen.

Вот пользовательская радиокнопка:

See the Pen eYNMQNM by Supun Kavinda (@SupunKavinda) on CodePen.

В обоих примерах мы использовали одну и ту же концепцию (input:checked).

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

Раскрывающийся список

Раскрывающийся список позволяет пользователю выбрать элемент из нескольких предложенных вариантов.

Вы можете стилизовать элемент , чтобы он выглядел более привлекательно.

Но вы не можете стилизовать выпадающие элементы, потому что их стили зависят от операционной системы. Единственный способ изменить их вид — использовать JavaScript.

Кнопки

Как и у большинства элементов, у кнопок есть стили, установленные по умолчанию.

Давайте немного украсим нашу кнопку.

5. Псевдоклассы UI

Ниже приведен список псевдоклассов, которые широко используются с элементами форм.

Эти псевдоклассы могут использоваться для показа уведомлений в зависимости от атрибутов элемента:

• :required
• :valid и :invalid
• :checked (этим мы уже пользовались)

Эти могут использоваться для создания эффектов для каждого состояния:

Сообщения, генерируемые при помощи :required

Показываем сообщение о том, что заполнение поля является обязательным:

Если вы удалите атрибут required при помощи JavaScript, сообщение «Required» исчезнет автоматически.

Примечание: не может содержать другие элементы. А значит, и псевдоэлементы :after или :before. Поэтому нам нужно использовать другой элемент — .

Мы можем сделать то же самое с псевдоклассами :valid и :invalid.

:hover и :focus

:hover выбирает элемент, когда на него наводится курсор мыши. :focus выбирает элемент, когда тот в фокусе.

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

Вот несколько эффектов наведения для элементов формы (попробуйте навести курсор на разные поля):

See the Pen yLNKZqg by Supun Kavinda (@SupunKavinda) on CodePen.

Когда пользователь видит небольшие изменения в элементе, происходящие при наведении мыши, он понимает, что с элементом можно что-то делать. Это важно для дизайна элементов форм.

Вы замечали, что в некоторых браузерах вокруг элемента, находящегося в фокусе, появляется синяя внешняя граница? Вы можете использовать псевдокласс :focus, чтобы удалить ее и добавить другие эффекты для элемента в фокусе.

Следующий код удаляет внешнюю границу для всех элементов:

Добавляем внешнюю границу для элементов в фокусе:

6. Элементы ввода, недоступные для кастомизации

Стилизация элементов форм всегда была сложной задачей. Есть некоторые элементы, с которыми не многое можно сделать в плане изменения стиля. Например:

Эти элементы предоставляются браузером и стилизуются в зависимости от вашей ОС. Единственный способ изменить их стиль — использовать кастомные контролы (Custom Controls), созданные при помощи div, span и прочих HTML-элементов, поддающихся стилизации.

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

Кастомные контролы для элементов форм уже разработаны для основных JavaScript-библиотек. Найти их можно на GitHub.

Заключение

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

В качестве совета напоследок: не забывайте делать все ваши формы отзывчивыми.