Возможно ли стиль ввода текста, чтобы заполнить его ширину?

У меня была эта проблема в течение многих лет, и раньше я видел подобные вопросы, но никто из них не обратил внимание на то, что при установке width: 100% на элементах - paddings, поля и границы будут увеличивать ширину.

Посмотрите на Fiddle.

Белым верхним текстовым полем является стандартное текстовое поле с шириной, установленной на 100%. Как вы видите, он переполняет его родительским из-за настроек полей, дополнений и границ.

Зеленое текстовое поле оформляется как div с помощью position: absolute. Это похоже на мечту в браузерах webkit, но нигде больше.

Красный div - это элемент управления - я хочу, чтобы входной сигнал действовал точно так же.

Есть ли какие-либо хаки/трюки, которые я могу использовать, чтобы мои текстовые входы действовали так же, как красный div во всех современных браузерах, другими словами, вписывались в дополнение к родительскому элементу? Измените мой скрипт или создайте свой собственный, чтобы сопровождать ваш ответ. Спасибо!

Ответы

Ответ 1

Вы можете:

input#classic
{
    width: 100%;
    padding: 5px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;        
}

JS Fiddle demo.

Примечание. Я удалил margin, так как это вызвало переполнение и установило box-sizing для определения ширины элемента, включая ширину границ и отступов.

Ответ 2

Используя calc для компенсации поля и box-sizing для дополнения

input#classic
{
    padding: 5px;
    margin: 5px;
    width: -webkit-calc(100% - 10px);
    width: -moz-calc(100% - 10px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

FIDDLE