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

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/

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