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

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

Взгляните на Fiddle .

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

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

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

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