在输入内填充而不影响宽度

Question

我在填充输入内容时遇到问题。 这就是我在不添加任何内容的情况下看到输入的方式：

当我尝试添加以下内容时，我想在placeholder 和内容value 中添加一个填充：

input{
    padding-left: 10px;
}

这发生了：

如你所见：

1. textarea 具有 100% 的宽度，但向输入添加填充会使它们超过最大宽度。
2. 当我在同一行中有两个输入时，它们会相互重叠。

我尝试用百分比更改每个输入的width 以获得看起来不错的东西，但是当屏幕的大小发生变化并变得响应时，它就会成为问题。

所以，我尝试了另一种解决方案；为此，我更改了填充和调整大小：

::-webkit-input-placeholder { 
    padding-left: 10px;
}

:-moz-placeholder { /* Firefox 18- */
    color: grey; 
    padding-left: 10px;
}

::-moz-placeholder {  /* Firefox 19+ */
    padding-left: 10px; 
}

:-ms-input-placeholder {
    padding-left: 10px; 
}

但是现在，我有另一个问题，可以部分解决我的问题，因为这会添加一个填充，但只添加到 placeholder 而不是内容 value。

我该如何解决我的问题？有什么想法吗？

Answer 1

您可以使用box-sizing 属性来更改盒子模型的计算方式。

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

这样，您将填充添加到输入本身而不是占位符文本。更加一致。