CSS Содержит текст ввода до 100% ширины

Поэтому, когда я устанавливаю вход как этот пример, текстовое поле, потому что оно имеет границу и дополнение по умолчанию, будет более 200 пикселей.

<div style="width:200px; background-color:red;">
    <input type="text" name="fname" style="width:100%;"/>
</div>

Я знаю, что могу заставить текстовое поле соответствовать 200px, установив класс во входной тег и пометив его этим CSS

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;    
box-sizing: border-box;

Есть ли лучший способ правильно настроить это текстовое поле, т.е. заполнить 100%, как я этого хочу? Я не могу использовать фиксированные размеры. Я использую темы CSS, поэтому заполнение, поля и т.д. Не известны во время компиляции. Они могут быть изменены пользователем на лету. Таким образом, решение должно работать независимо от того, какое значение имеет поле ввода, граница и маржа.

ОТВЕТЫ

Ответ 1

Думаю, вы уже ответили на свой вопрос. box-sizing: border-box; - действительно единственное средство CSS, позволяющее получить элемент в его родительском элементе. css-трюки подробно рассказывают об этом здесь.

http://css-tricks.com/box-sizing/

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

Ответ 2

<div style="width:200px; background-color:red;">
    <input type="text" name="fname" style="width:100%;border:1px;padding:4px;margin:-5px"/>
</div>

Ответ 3

<div style="width:200px; height:22px; background-color:red;">
    <input type="text" name="fname" style="width:97%;margin-left:1%;"/>
</div>

?

Но если серьезно, здесь jsfiddle.

Ответ 4

Да. Вы можете сделать.

Вы можете сделать это, не используя box-sizing и не чистые решения, такие как width~=99%. Демо на jsFiddle:
enter image description here

Разметка HTML:

<div class="input_wrap">
    <input type="text" />
</div>

CSS

div {
    padding: 6px 17px; /* equal to negative input margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container width */ 
    border: 7px solid #DFDFDF;  
    padding: 0 10px;
    margin: 0 -17px; /* negative margin = border-width + horizontal padding */ 
}