До 1998 года (год появления CSS Level 2) элементы формы уже были широко внедрены во всех основных браузерах. В CSS 2 спецификации не рассматривается вопрос о том, как элементы формы должны быть представлены пользователям. Поскольку эти элементы являются частью пользовательского интерфейса каждого веб-документа, авторы документации предпочли оставить визуальную верстку таких элементов по умолчанию табличных стилей веб-браузеров.

 

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

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

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

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

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

модель По умолчанию

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

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

И наоборот, form и fieldset элементы являются блочными:

fieldset, form { display: block; }

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

• Строчно-блочные элементы можно стилизовать, используя строчный контекст форматирования. Это предполагает использование CSS свойств, таких как line-height и vertical-align для контроля высоты блока и вертикального выравнивания. Padding и margin (отступы) также могут применяться для определения внешнего и внутреннего размещения блока. Кроме того, строчно-блочные элементы принимают ширину и высоту, потому что они имеют одну модель форматирования блока.
• Блочные элементы можно стилизовать, используя хорошо известный контекст блочного форматирования. Тем не менее, возникают проблемы  с fieldset и legend элементами, поскольку 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; }

Для примера, см. на странице jsFiddle «CSS: Определение размеров элементов формы» .

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

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

Padding также …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров