Проблемы CSS оформления в элементах форм

До появления CSS2 в 1998 году, элементы форм уже активно поддерживались различными браузерами. Однако ни тогда, ни сейчас не был определён единый стиль отображения данных элементов. В результате, до сих пор элементы форм перенимают стили браузера.

Идут года, веб-разработчики пытаются решить эту проблему, возникшую из-за отсутствия чёткой CSS спецификации в отношении элементов форм, и добиться кроссбраузерного отображения таких элементов, как input, select, fieldset, legend и textarea. В этой статье мы пробежимся по некоторым CSS рецептам, предназначенным для унификации отображения элементов форм.

Тесты Роджера Йоханссона

В 2004 и 2007 гадах, Роджер Йоханссон создавал специальные наборы тестов. В конце он пришёл к выводу, что с помощью CSS невозможно стилизовать формы под все браузеры и платформы. Также его анализ выявил, что многие браузеры игнорируют некоторые CSS стили.

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

Стандартная модель

В спецификации CSS 2.1 было определено, что элементы форм textarea, input и select будут обладать характеристиками как блочных, так и строчных элементов (inline-block):

textarea, input, select {
   display: inline-block;
}

В свою очередь, элементы form и fieldset обладают характеристиками только блочных элементов (block):

fieldset, form {
   display: block;
}

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

К элементам, обладающим как блочными, так и строчными характеристиками могут быть применены CSS свойства такие как line-height и vertical-align, для контроля высоты контейнера и выравнивания по вертикали. Также им доступны и другие характеристики, такие как внешние и внутренние отступы, а также свойства ширины и высоты.

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

Как же решить данную проблему?

Определение размеров

Со временем, веб-разработчики заметили, что браузеры начинают неправильно отображать некоторые элементы форм, если им задать размеры:

input, select {
   width: 120px;
   height: 32px;
}

Многие пытались, превратить данные элементы в блочные:

input, select {
   width: 120px;
   height: 32px;
   display: block;
}

Однако, результаты оставляли желать лучшего. Только элемент textarea не вызывала проблем. Решение родилось некоторое время спустя, когда вместо свойства height стали использовалось сочетание свойств font-size и padding.

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

input, select {
   width: 120px;
   font: 1em Arial, sans-serif;
}

Пример можно увидеть тут.

Далее можно добавить немного внутреннего отступа, для расширения пространства элементов:

input, select {
   width: 120px;
   font: 1em Arial, sans-serif;
   padding: 3px 6px;
}

Затем можно оформить и внешнее оформление элементов input и textarea:

input[type="text"],
input[type="password"],
textarea {
   border: 1px solid #ccc;
}

Элементам input типа button и submit браузеры приписывают дополнительный внутренний отступ. Нормализовать это можно следующим образом:

input[type="button"],
input[type="submit"] {
   padding: 2px;
}

Также, можем применить специальные браузерные префиксы. К примеру, для браузерах, работающих на webkit, можно написать следующие стили:

input[type="button"], input[type="submit"],
input[type="reset"], input[type="file"]::-webkit-file-upload-button,
button {
   -webkit-box-align: center;
   text-align: center;
   cursor: default;
   color: buttontext;
   padding: 2px 6px 3px;
   border: 2px outset buttonface;
   border-image: initial;
   background-color: buttonface;
   box-sizing: border-box;
}
input[type="button"], input[type="submit"], input[type="reset"] {
   -webkit-appearance: push-button;
   white-space: pre;
}

Внутренние отступы также можно применить к элементам fieldset и legend, но учитывая некоторые особенности:

Если поставить внутренним отступам элемента fieldset значение 0, то в некоторых браузерах это может привести к потере отступов элементов legend (не в IE);

Если поставить внутренним отступам элемента legend значение 0, то эти элементы станут слишком сжаты.

Нормализовать и унифицировать отображение чек боксов, радио кнопок и селект боксов можно, задав следующие свойства:

• font-family,
• font-size,
• width (для селект боксов),
• padding.

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

Выравнивание

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

• свойство float;
• используйте блочно-строчную природу данных элементов (inline-block); Когда вы применяете свойство float, то задействованные элементы автоматически преобразуются в блочные, и к ним теперь можно применять особые блочные свойства.

Применяя float главной проблемой становится вертикальное выравнивание. Решение заключается в применении внутренних или внешних верхних отступов:

input, select {
   width: 120px;
   float: left;
   margin-top: 0.4em;
}

Этот способ подходит, если нам необходимо выровнять блоки с текстом. Если же мы хотим создавать формы с элементами label, то нужно применить ещё одно правило:

label {
   float: left;
   padding-top: 0.4em;
   width: 5em;
   margin-right: 1em;
}

Также проблема отображения возникает и у кнопок. Если высота вашей кнопки больше высоты рядом стоящих элементов, то выравнять её вертикально можно, добавив position: relative:

input[type="submit"] {
   float: left;
   width: 90px;
   position: relative;
   top: 0.4em;
}

Данный подход также пригоден для чекбоксов и радио кнопок. Также его можно применить и для элемента legend с внутренними fieldset, изменив только одно: top на left.

Если мы имеем дело со строчными элементами, то вертикальное выравнивание применяется добавлением свойства vertical-align:

label, input[type="text"] {
   vertical-align: middle;
   margin-right: 1em;
}

Также неплохо скомбинировать данный подход с добавлением line-height. Однако его нужно добавлять к родительскому элементу. Если применить данное свойство непосредственно к какому-то элементу, то его высота может увеличиться.

.form-row {
   line-height: 1.4;
}

Этого можно избежать, задав конкретную высоту:

.form-row {
   line-height: 1.8;
   height: 1.8em;
}

Также строчным элементам можно задать выравнивание с помощью свойства text-align.

Проблемы с элементами загрузки файлов

В отношении элементов загрузки файлов <input type="file"/> нужен совершенно другой подход. В целях безопасновти, данные элементы всегда должны быть видимы и узнаваемы. Именно поэтому браузеры часто просто игнорируют наши попытки оформить эти элементы, применяя стандартные стили.

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

Однако веб-разработчики и тут нашли лазейку. Во-первых, данный элемент нужно поместить в блок div:

<form action="" method="post" enctype="multipart/form-data">
   <div class="upload">
      <input type="file" name="upload"/>
   </div>
</form>

Скрытие элемента загрузки файла осуществляется путём применения свойства opacity. Далее можно колдовать с собственными стилями:

.upload {
   width: 157px;
   height: 57px;
   background: url(upload.png) no-repeat;
   overflow: hidden;
}

.upload input {
   display: block !important;
   width: 157px !important;
   height: 57px !important;
   opacity: 0 !important;
   overflow: hidden !important;
}

Обратите внимание на запись !important. Это лучший способ заменить стандартные стили браузера.

Пример вы можете увидеть тут.

Заключение

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

• Комментарии