Проблемы CSS с элементами форм

​

Ещё до 1998 года, в котором появилась спецификация CSS level 2, элементы форм уже имели широкую поддержку во всех основных браузерах. Спецификация CSS 2 так и не дала ответа на вопрос, каким образом должны представляться элементы форм пользователям. Поскольку элементы форм являются частью пользовательского интерфейса в каждом веб-документе, авторы спецификации предпочли оставить визуальное представление html-элементов форм по умолчанию для каждого браузера.

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

Тесты Роджера Йоханссона для стилизации элементов форм

Еще в 2004, а затем в 2007 году Роджером Йоханссоном были созданы специальные наборы тестов для элементов форм и CSS. Из этих тестов следует один вывод, который расстроил Роджера:

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

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

Модель отображения элементов форм по умолчанию

По умолчанию спецификация CSS 2.1 применительно к HTML4 устанавливает к элементам форм, таким как textarea, input и select режим отображения inline-block:

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

И наоборот, элементы form и fieldset имеют режим отображения block:

 fieldset, form {
    display: block;
 }

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

• Inline-block элементы можно стилизовать, используя контекст inline форматирования. Это предполагает использование CSS свойств, таких как line-height и vertical-align для контроля высоты элемента и вертикального выравнивания. Свойства padding и margin также могут быть применены для контроля внутреннего и внешнего отступа для элементов формы. Стоит отметить, что inline-block элементы можно контролировать и с помощью width и height, их поведение в этом плане не отличается от обычных блочных элементов.
• Block-элементы можно стилизовать стандартным способом, используя обычный блочный контекст форматирования. Тем не менее, возникают проблемы с элементами форм fieldset и legend, поскольку они полностью полагаются на стили самого браузера.

Возникает вопрос, как же решать эти проблемы разработчикам?

Решение проблем с размерами элементов форм

Web-разработчики в скором времени увидели, что браузеры, обрабатывают inline-block элементы довольно странно, когда дело доходит до определения их размеров. Определение высоты довольно часто приводит к неожиданным результатам:

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

Разработчики пытались решить эту проблему с помощью inline-block:

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

Результаты всё еще оставляют желать лучшего за исключением элемента textarea. Чтобы решить эту проблему нужно в первую очередь нормализовать шрифт и размер шрифта для элементов форм:

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

После того, как установлен шрифт, вы можете добавить отступы:

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

Элементам input и textarea также можно задать border, что окажет влияние на их рамзмеры в соотвествии с box-model:

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

Элементы input типа button и submit могут иметь дополнительный padding добавляемый браузером. Распространённой практикой является их нормализация:

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

Проблемы с этим подходом в том, что браузеры часто пррименюят вендорные префиксы к свойствам элементов, поэтому нормализовать padding не всегда удаётся. Например, для web-kit можно нормальзовать так:

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;
 }

Padding также действует и на элементы fieldset и legend, но с разными результатами:

• Установка padding для fieldset в 0 сбрасывает отступ по умолчанию только в некоторых браузерах (не в IE)
• Установка padding для legend в 0 приводит к сокращению этого элемента

Элементы select, checkbox, radio могут быть нормализованы с хорошими результатами лишь применительно к нескольким свойствам:

• Font-family
• Font-size
• Width (для select)
• Padding

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

Выравнивание элементов в формах

Элементы форм могут быть выравнены вертикально и горизонтально. Они могут располагаться на одной линии или в группе. Чтобы выровнять их по одной линии можно использовать float или стандартный контекст inline-block.

При использовании плавающих, элементы автоматически превращаются в блочные. Это означет, что теперь контроль этих элементов обеспечивается ещё девятью правилами box-model.

С плавающими элементами, главной задачей является добиться хорошего вертикально выравнивания на текущей строке. В этом случае обычной практикой является использование вертикальных margin или padding:

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

Этот подход работает, когда вам не надо выравнивать блоки с текстом, например элемент label. В этом случае можно использовать относительное позиционирование, padding или margin к элементу, который содержит только текст:

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

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

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

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

Если вы используете элементы в контексте инлайнового форматирования, то можно применять свойство vertical-align для вертикльного выравнивания:

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

Хорошие результаты могут быть достигнуты путём объединения этого свойства со свойством line-height. Однако это свойство должно быть установлено на родительский элемент. Если его установить непосредственно на сам элемент формы, будет задействована высота элемента:

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

Использование объявления высоты для родительского элемента в паре с таким же значением line-height также является эффективной практикой:

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

В контексте инлайнового форматирования вы можете использовать свойство text-align для родительского элемента для выравнивания содержимого элемента формы по левому краю, центру или правому краю.

Странное поведение File Inputs

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

Кроме того, некоторые браузеры отображают только одну кнопку, а другие еще добавляют полу для пути к файлу.

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

Затем, используя 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;
 }

Это предпочтительный способ для переопределения правил в браузере!