css - CSS 输入中的目标文本

Question

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

如您所见，我的输入框文本两侧没有任何填充，这看起来很丑陋。但是，如果我修改我的 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 值(相对于 content-box 默认值)使最终呈现的框成为声明的宽度，并且框内的任何边框和填充都被切割。对 Firefox 使用 -moz-box-sizing。