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

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/

通过这种方式，您可以将填充添加到输入本身，而不是占位符文本。更加一致。