Что это в CSS/DOM, который запрещает окно ввода с дисплеем: блок от расширения до размера его контейнера

Пример HTML/CSS:

<div class="container">
    <input type="text" />
    <div class="filler"></div>
</div>

div.container {
    padding: 5px;
    border: 1px solid black;
    background-color: gray;
}

div.filler {
    background-color: red;
    height: 5px;
}

input {
    display: block;
}

http://jsfiddle.net/bPEkb/3/

Вопрос

Почему окно ввода не расширяется, чтобы иметь ту же внешнюю ширину, что, скажем, div.filler? То есть, почему окно ввода не расширяется, чтобы соответствовать его контейнеру, как и другие элементы блока с помощью width: auto; do?

Я попытался проверить "User Agent CSS" в Firebug, чтобы узнать, могу ли я что-нибудь придумать. Не повезло. Я не мог найти каких-либо особых различий в CSS, которые я мог бы конкретно связать с полем ввода, по-другому отличающимся от обычного div.filler.

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

borkweb и Phrogz предоставили исключительную информацию, которая использует боковую модель border-box из старых дней. Спасибо за это! Я хотел бы еще раз подчеркнуть мой вопрос, который я намерен придерживаться в предлагаемом решении моей практической проблемы:

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

ОТВЕТЫ

Ответ 1

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

Существует несколько элементов (<input>, <select>, <button>, <img>, <object>, and <textarea>), которые считаются замененными элементами, внешний вид и размеры которых определяются внешним ресурсом. (например, операционная система, плагин и т.д.)

Замененные элементы могут иметь внутреннюю значения ширины и высоты которые определяются элементом а не его окружения в документе. Для Например, если элемент изображения имеет ширина установлена ​​на авто, ширина файл связанного изображения будет использоваться. Внутренние размеры также определяют внутреннее соотношение, используемое для определить рассчитанные размеры элемент должен иметь только один размер указывается. Например, если только ширина задается для изображения элемент-на, скажем, 100px- и фактический изображение составляет 200 пикселей в ширину и 100 высота пикселей, высота элемента будет масштабироваться на ту же сумму, чтобы 50px.

Замененные элементы также могут иметь визуальные требования к форматированию, налагаемые элемент, вне контроля CSS; например, элементы управления пользовательским интерфейсом для элементов формы.

W3C CSS 2.1 "Детали модели форматирования форматирования" обсуждает расчет ширины как замененных, так и не замененных элементов.

В целом... довольно неприятно для некоторых элементов формы (<textarea>, <button>, and <input>). Может/изменится? Вероятно, не скоро, скоро... Пока это не изменится в ядре, нам придется придерживаться хаков: (

Ответ 2

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

input {
    display: block;
    width: 100%;
    box-sizing: border-box; /* CSS3 */
    -moz-box-sizing: border-box; /* Firefox */
    -ms-box-sizing: border-box; /* IE8 */
    -webkit-box-sizing: border-box; /* Safari */
    -khtml-box-sizing: border-box; /* Konqueror */
}

Кроме того, чтобы заставить его работать с IE6 и IE7, вам нужно бросить это в свой HTML:

<!--[if lt IE 8]><style>input{behavior:url("boxsizing.htc");}</style><![endif]-->

Посмотрите в действии, здесь.

Получить boxsizing.htc здесь.

SpliFF post был моим источником некоторое время назад, и я использовал его пару раз поскольку.

Ответ 3

Насколько мне известно, длина текстового поля по умолчанию составляет 20 символов.

Я предполагаю, что значение, которое оно получает, когда вы устанавливаете его на авто. Обычно нецелесообразно иметь текстовое поле с размером ширины экрана, поэтому, по моему мнению, по умолчанию оно равно 20 символам в авто.

В любом случае, лучше проверить стандарт w3c или получить ответ от какого-либо разработчика браузера.

Ответ 4

если вы хотите, чтобы элемент ввода имел ту же ширину, что и div.filter, и если div.filter имеет ту же ширину div.container, вы можете установить ширину: 100% на поле ввода.