是否可以设置文本输入的样式以填充其父级的宽度？

Question

多年来我一直有这个问题,之前我见过类似的问题,但是没有一个问题解决过这样width: 100%一个事实:当设置元素时 - 填充,边距和边框会增加宽度.

---

看看这个小提琴.

白色最顶部的文本框是标准文本框,其宽度设置为100%.正如您所看到的那样,由于边距,填充和边框设置,它会溢出它的父级.

绿色文本框的样式类似于div使用position: absolute.这在webkit浏览器中就像一个梦想,但在其他任何地方都没有.

红色div是控件 - 我希望输入就像那样.

---

我可以使用任何黑客/技巧让我的文本输入就像所有现代浏览器中的红色div一样,换句话说,是否适合父级的填充？请编辑我的小提琴或创建自己的答案.谢谢!

Answer 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小提琴演示.

注意我删除了margin,因为它导致溢出,并设置box-sizing为确定元素的宽度,包括边框和填充的宽度.