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

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/

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