html – CSS将输入文本包含到100％的宽度

所以当我设置输入像这个例子的文本框,因为它有一个边框和填充默认情况下,将比200px更宽.

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

我知道我可以通过将类设置为输入标记并使用此CSS进行标记来强制将文本框放在200px内

-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;    
Box-sizing: border-Box;

有没有更好的方式让这个texBox的大小正确,即填充100％,因为我想要它做？我不能使用固定尺寸.我使用CSS主题,因此在编译时不知道文本框填充,边距等.用户可以随时更改它们.所以解决方案必须工作,无论文本框的填充,边框和边距是多少.

解决方法

我想你已经回答了你自己的问题. Box-sizing：border-Box;是真正的唯一的CSS方法来使元素适合其父级. css-tricks在这里有很多细节.

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

我不知道可以使用的任何其他CSS,而不是使用javascript来执行一些计算,然后修改输入元素.