Тридцатый пятый урок. Стилизация элементов формы

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

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

В первую очередь следует отметить стилизацию BUTTON. Пожалуй, это самая простая для настройки задача. В первую очередь для кнопки выставляется display: inline-block;, что в дальнейшем позволяет применять к ней любые блоковые свойства.

Как правило у кнопки убирается граница border: none; или задаётся своя, что браузер воспринимает как отказ от своих стилей оформления. С фоном поступают аналогично, как правило заливая своим цветом. Часто для фона используют градацию или даже фоновое изображение.

Остальные свойства: отступы, центрирование, скругление углов — всё это типовые css-свойства. У кнопки обязательно прописывается состояние :hover и :disabled (неактивная кнопка).

В UniCSS для кнопок предназначен класс .button, который сразу же применяется и ко всем тэгам BUTTON (размещается в файле main/_forms.scss).

Простые текстовые поля INPUT стилизуются похожим образом, но здесь следует учитывать, что само поле ввода — это не просто блок, а особый браузерный элемент, который имеет разные состояния. Такие сложные вещи, вроде поля ввода числа (number), браузер модифицирует без оглядки на css-стили, что часто приводит к «дефектам» отображения.

Для текстового поля можно задавать фон, границу и другие css-свойства. Свойство padding не просто указывает на внутренние отступы, но и влияет на общую высоту элемента. Вообще с высотой много нюансов, поскольку для браузера «физическая» область ввода текста — это не тоже самое, что и элемент INPUT. Это немного странно звучит, но с таким поведением вы непременно столкнётесь в процессе верстки сложных форм. Это может выглядеть как отображение лишь части текста.

<input style="border: 1px solid silver; padding: 7px; height: 24px;" value="Какой-то текст">

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

<input style="border: 1px solid silver; padding: 7px; font-size: 11px; height: 24px;" value="Какой-то текст">
<input style="border: 1px solid silver; padding: 7px; font-size: 16px;" value="Какой-то текст">

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

Для полей ввода следует учитывать состояния :focus, :disabled и :hover (как правило без фокуса).

Поле TEXTAREA стилизуется точно также как и текстовый INPUT. Стилизация SELECT аналогично, но с учетом того, что можно добавить стили для внутренних OPTION и OPTGROUP.

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

Общий алгоритм базируется на том факте, что у чекбокса (или радиокнопки) можно задать LABEL, который, собственно и выполняет переключение элемента. То есть посетитель кликает не на саму кнопку, а на его LABEL.

Дальше так. Родной элемент кнопки просто скрывается, а вместо него отображается SPAN (можно другой, это не важно), который оформляется уже под свою задачу, например выводит иконку.

<label class="my-checkbox">
	<input class="b-hide" type="checkbox" name="ch1">
	<span class="mar10-l t-gray500 hover-t-gray600 i-heart-o">Солнце</span>	
</label>

<label class="my-checkbox">
	<input class="b-hide" type="checkbox" name="ch1">
	<span class="mar10-l t-gray500 hover-t-gray600 i-heart-o">Луна</span>	
</label>

<label class="my-checkbox">
	<input class="b-hide" type="checkbox" name="ch1">
	<span class="mar10-l t-gray500 hover-t-gray600 i-heart-o">Юпитер</span>	
</label>

Поскольку SPAN внутри LABEL, как и INPUT, то клик по нему переключает элемент (даже невидимый). Когда чекбокс отмечен, браузер автоматически создает псевдокласс :checked — это отмеченное состояние чекбокса (input:checked { стиль }). Чтобы связать между собой INPUT и SPAN используется соседний селектор (E + F).

input:checked + span { ... }

Таким образом данный код будет работать только когда в html-разметке после INPUT сразу следует SPAN. Дальше с стилях можно задать разное оформление. Для упрощения верстки, для LABEL создают класс, который «связывает» внутренние элементы между собой.

.my-checkbox input:checked + span {
	color: orange !important; /* просто меняем цвет */
}

.my-checkbox input:checked + span::before  {
	content: "\f004"; /* код иконки из FontAwesome */
}

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

Для радиокнопок всё работает аналогично, только используется другой класс, чтобы указать другие иконки.

<label class="my-radio">
	<input class="b-hide" type="radio" name="r1" checked>
	<span class="mar10-l t-gray500 hover-t-gray600 i-circle-o">Солнце</span>	
</label>

<label class="my-radio">
	<input class="b-hide" type="radio" name="r1">
	<span class="mar10-l t-gray500 hover-t-gray600 i-circle-o">Луна</span>	
</label>

<label class="my-radio">
	<input class="b-hide" type="radio" name="r1">
	<span class="mar10-l t-gray500 hover-t-gray600 i-circle-o">Юпитер</span>	
</label>
.my-radio input:checked + span {
	color: green !important;	
}

.my-radio input:checked + span::before  {
	content: "\f192";
}

Внешний вид элементов формы будет зависеть от дизайна макета, поэтому верстать их придётся каждый раз заново. Как правило, дизайн форм является составной частью типографики сайта. В CSS-фреймворках присутствуют уже настроенные элементы для непосредственного использования. В UniCSS, помимо этого, предусмотрен класс .light, который предлагает альтернативный дизайн для некоторых INPUT.

<input type="text" value="Обычный дизайн">
<input class="light" type="text" value="Light-дизайн">

В файле main/_forms.scss его можно настроить под свою задачу.