Width: auto для полей <input>

Новый вопрос CSS. Я думал, что width:auto для элемента display:block означает "заполнить свободное пространство". Однако для элемента <input> это, похоже, не так. Например:

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

Два вопроса:

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

Спасибо!

Ответ 1

Ширина <input> создается из атрибута size. Значение по умолчанию size - это то, что управляет автоматической шириной.

Вы можете попробовать width:100%, как показано в моем примере ниже.

Не заполняет ширину:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Заполняет ширину:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Меньший размер, меньшая ширина:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

UPDATE

Вот лучшее, что я мог сделать через несколько минут. Он 1px выключен в FF, Chrome и Safari и идеально подходит для IE. (Проблема в том, что # ^ & * IE применяет границы по-другому, чем все остальные, чтобы они не были согласованы.)

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

Ответ 2

"Существует ли определение того, какая ширина: авто означает? spec кажется смутным для меня, но, возможно, я пропустил соответствующий раздел.

Никто не ответил на вышеупомянутую часть исходного вопроса о посте.

Вот ответ: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Пока значение ширины автоматически, элемент может иметь горизонтальный margin, padding и border, не становясь более широкими, чем его контейнер...

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

Чтобы визуализировать разницу, я привел пример: http://www.456bereastreet.com/lab/width-auto/

Ответ 3

Как указано в другом ответе, width: auto не работает из-за того, что ширина генерируется атрибутом размера ввода, который не может быть установлен на "авто" или что-то подобное.

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

Сначала вы можете установить прописку в поле с использованием процентов, убедившись, что ширина составляет до 100%, например:

input {
  width: 98%;
  padding: 1%;
}

Еще одна вещь, которую вы можете попробовать - использовать абсолютное позиционирование, с левым и правым значением 0. Используя эту разметку:

<fieldset>
    <input type="text" />
</fieldset>

И этот CSS:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

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

Кроме этого существуют некоторые решения JS, но мне не нравится применять базовый стиль с JS.

Ответ 4

Это может быть не совсем то, что вы хотите, но мое обходное решение - применить стиль автоучета к обертке div, а затем установить ваш вход на 100%.

Ответ 5

Единственный вариант, о котором я могу думать, - это использовать width:100%. Если вы хотите иметь дополнение в поле ввода, а не просто разместить контейнер label вокруг него, вместо этого переместите форматирование на эту метку, а также укажите дополнение к метке. Поля ввода являются жесткими.

Ответ 6

Ответ 1 - "ответ" дал хороший ответ/ссылку для него. Короче говоря, "auto" по умолчанию, так что это как удаление любых изменений в ширине элемента

Ответ 2 - вместо этого используйте width: 100%. Он заполнит 100% родительского контейнера, в данном случае "форму".