CSS: текстовое поле для заполнения родительского контейнера

Question

Я пытаюсь разрешить <input type="text"> (далее именуемый как «текстовое поле») заполнить родительский контейнер, установив его width на 100%. Это работает до тех пор, пока я не дам текстовому полю дополнение. Затем это добавляется к ширине содержимого и переполнению поля ввода. Обратите внимание, что в Firefox это происходит только при рендеринге контента в соответствии со стандартами. В режиме quirks применяется другая модель коробки.

Вот минимальный код для воспроизведения поведения во всех современных браузерах.

#x { 
 
    background: salmon; 
 
    padding: 1em; 
 
} 
 

 
#y, input { 
 
    background: red; 
 
    padding: 0 20px; 
 
    width: 100%; 
 
}

<div id="x"> 
 
    <div id="y">x</div> 
 
    <input type="text"/> 
 
</div>

Мой вопрос: Как получить текстовое поле, чтобы соответствовать контейнер?

Примечание: для <div id="y">, это просто: просто установить width: auto. Однако, если я попытаюсь сделать это для текстового поля, эффект будет другим, и текстовое поле примет значение по умолчанию в строке по ширине (даже если я установил display: block для текстового поля).

/EDIT: «Решение» Дэвида, конечно, будет работать. Тем не менее, я не хочу изменять HTML - я особо не хочу добавлять фиктивные элементы без семантической функциональности. Это типичный случай divitis, который я хочу избежать любой ценой. Это может быть только взлом в последней инстанции.

Answer 1

Вы можете окружить текстовое поле с <div> и дать, что <div>padding: 0 20px. Ваша проблема заключается в том, что ширина 100% не содержит значений заполнения или поля; эти значения добавляются поверх 100% -ной ширины, таким образом, переполнение.

Answer 2

Я считаю, что вы можете противостоять переполнению с отрицательным отрывом. т.е.

margin: -1em; 

Answer 3

Такое поведение вызвано различными интерпретациями модели коробки. В правильной модели окна указано, что ширина применяется только к содержимому, а добавление и добавление к нему добавляются. Таким образом, вы получаете 100% плюс 20px правое и левое дополнение, равное 100% + 40px, как общая ширина. Оригинальная модель IE box, также известная как режим quirks, включает в себя заполнение и разметку по ширине. Таким образом, ширина вашего контента в этом случае будет составлять 100% - 40 пикселей. Вот почему вы видите два разных поведения. Насколько я знаю, для этого нет решения, однако есть работа вокруг, устанавливая ширину, чтобы сказать 98%, и отступы до 1% с каждой стороны.

Answer 4

@ Domenic это не работает. width auto не делает ничего больше, чем поведение по умолчанию этого элемента, потому что начальное значение ширины авто (см. стр. 164, Cascading Style Sheets Level 2 Revision 1 Specification). Присвоение отображения блока типов также не работает, это просто говорит браузеру использовать блок-блок при отображении элемента и не присваивает по умолчанию поведение как можно большего пространства, например, div (см. Стр. 121, Каскадный стиль Листы 2-го уровня версии 1). Это поведение обрабатывается визуальным агентом пользователя, а не определением CSS или HTML.

Answer 5

Из-за способа определения и реализации Box-Modell я не думаю, что для решения этой проблемы существует только css-решение. (Кроме того, что описано Matthew: с использованием процента для заполнения, например, ширина: 94%; заполнение: 0 3%;)

Возможно, вы создали Javascript-код для динамического расчета ширины загрузки страницы. ..hm, и это значение, конечно же, также должно обновляться каждый раз, когда размер окна браузера изменяется.

Интересный побочный продукт некоторого тестирования я сделал: Firefox делает установить ширину поля ввода до 100%, если дополнительно к width: 100%; также установить максимальную ширину до 100%. Это не работает в Opera 9.5 или IE 7, хотя (не тестировали старые версии).

Answer 6

Это, к сожалению, невозможно с чистым CSS; Изменения HTML или Javascript необходимы для любого нетривиального гибкого, но ограниченного поведения пользовательского интерфейса. Столбцы CSS3 помогут в этом отношении несколько, но не в сценариях, подобных вашим.

Решение Дэвида является самым чистым. На самом деле это не случай с девитом - вы не добавляете кучу divs без необходимости или даете им такие имена, как «p» и «h1». Это служит определенной цели, и в этом случае приятно, что это также расширяемое решение - например. вы можете добавить закругленные углы в любое время, не добавляя ничего дальше. Доступность также не затрагивается, поскольку они являются пустыми div.

FWIW, вот как я реализую все мои текстовые поля:

<div class="textbox" id="username"> 
    <div class="before"></div> 
    <div class="during"> 
     <input type="text" value="" /> 
    </div> 
    <div class="after"></div> 
</div> 

Ты то можете использовать CSS, чтобы добавить закругленные углы, добавить отступы, как в вашем случае, и т.д., но вы также не» t должен - вы можете полностью скрыть эти боковые divs и иметь только текстовое поле ввода.

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

В любом случае, мои два цента: не позволяйте идеализму встать на путь практичности в таких случаях. :) Решение Дэвида работает и почти не загромождает HTML вообще (и на самом деле использование семантических классных имен вроде «before» и «after» по-прежнему очень чистое imo).

Answer 7

по умолчанию обивка и границы позволит предотвратить текстовое поле с действительно быть 100%, так что сначала вы должны установить их на 0:

input { 
    background: red; 
    padding: 0; 
    width: 100%; 
    border: 0; //use 0 instead of "none" for ie7 
} 

Затем положить границу и любое заполнение или маржу вы хотите в ДИВ вокруг текстового поля:

.text-box { 
    padding: 0 20px; 
    border: solid 1px #000000; 
} 

<body> 
    <div id="x"> 
     <div id="y">x</div> 
     <div class="text-box"><input type="text"/></div> 
    </div> 
</body> 

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

Answer 8

С помощью CSS3 вы можете использовать свойство box-sizing на ваших входах, чтобы стандартизировать свои модели боксов. Нечто подобное позволит вам добавить отступы и иметь ширину 100%:

input[type="text"] { 
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit 
    -moz-box-sizing: border-box; // Firefox, other Gecko 
    box-sizing: border-box;   // Opera/IE 8+ 
} 

К сожалению, это не будет работать для IE6/7, но остальные прекрасно (Compatibility List), так что если вам необходимо поддерживать эти браузеры вашим лучшим решением будет решение Davids.

Если вы хотите узнать больше, посетите this brilliant article by Chris Coyier.

Надеюсь, это поможет!