在CSS的输入中定位文本

Question

我正在建立联系表格。目前我有一个文本框设置有顶部和底部填充。我的文字看起来像这样。

正如您所看到的，我输入框文本的两侧看起来没有任何填充物看起来很难看。但是，如果我将reguards中的css修改为输入框，它会将填充添加到实际的框而不是文本本身，推动事情：

我确信我可以做一些事情，例如给框添加一个负边距来抵消填充并调整宽度，但我宁愿弄清楚如何在输入中定位文本。我知道这有点难以想象，所以这是我的预期结果：

这是我目前的CSS。

/* top two boxes */
input
{
width: 49.9%;
font-size: 24px;
padding-top: 12px;
padding-bottom: 12px;
}

/* textarea CSS*/
textarea
{
font-family: 'Open Sans', sans-serif;
width: 100%;
height: 200px;
font-size: 24px;
}

我是否缺少某种选择器？

Answer 1

box-sizing：border-box？ border-box值（与内容框默认值相对）使最终呈现的框具有声明的宽度，并在框内部切割任何边框和填充。 使用-moz-box-sizing for firefox。