css - 仅设置表单输入的样式

Question

所以，我有一个表格。

我想在表单域中添加一个padding。因此，当人们开始输入时，文本将在句子和字段的左边框之间出现一个很好的间隙...

我可以使用 padding-left，但是 who 字段会跳到左边(但它对文本有效)。

我正在寻找允许我自行设置 input 文本样式的 CSS 代码。

我试过这段代码，但也行不通。

input[type=text] {
    padding-left: 20px;
}

编辑:我张贴了一张图片在输入 [type=text] 上使用 padding-left 时会发生什么。它确实有效，但在右侧您可以看到该字段发生了什么。领域越来越广..

Answer 1

问题是因为 padding 被添加到字段的呈现 width 中。

使用box-sizing属性解决。

input[type=text] {
    padding-left: 20px;
    box-sizing: border-box;
}