INPUT и SELECT элементы нестандартного размера

Question

Как я понимаю, свойства width / padding / margin работают только с элементами уровня блока. Тем не менее, на элементах INPUT и SELECT я могу указать ширину, которая работает. Должно ли это?

Я мог бы написать что-то вроде этого:

<input type="text" style="display:block;" />

Но нужно ли это?

Может кто-нибудь объяснить, пожалуйста, почему это работает?

Answer 1

В спецификации сказано: :

Применяется ко всем элементам, кроме незаменяемых встроенных элементов, строк таблицы и групп строк

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

Поскольку они заменены, они не являются незаменяемыми, поэтому применяется свойство width.

Answer 2

На самом деле это не встроенные элементы, а встроенные блоки . Это позволяет вам задавать ширину, высоту и другие специфичные для блока свойства без необходимости прерывать поток встроенных элементов. В хороших браузерах вы можете использовать «display: inline-block» на любом элементе для достижения того же результата.

Answer 3

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

Спецификация W3 для элемента ввода технически делает его встроенным элементом. Inline-block даже не является частью спецификации W3, это часть CSS2 (следовательно, старые браузеры несовместимы).

В IE есть несколько забавных ошибок, если вы, например, указали ширину в процентах и ​​поместили в нее много текста.

Короче говоря, это почти всегда безопасно, просто не является частью официальной спецификации, которую я видел.

Answer 4

Элементы формы - это паршивая овца мира HTML / CSS - есть множество свойств, которые не работают как обычные элементы HTML.

Хотя это не отвечает на ваш вопрос, вам может показаться интересным следующее обсуждение: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

Answer 5

Вы понимали, что случилось, если это было бы невозможно? Когда был введен элемент INPUT, CSS не было. И ширина элемента INPUT абсолютно необходима в HTML для создания правильных форм.