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

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

我想在 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; 
}

但现在,我有另一个问题,这部分解决了我的问题,因为这增加了一个填充,但仅限于 占位符 不符合内容 价值 .

我怎样才能解决我的问题?知道吗?