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

Question

所以，我有一个表格。

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

我可以使用padding-left，但随后 who 字段跳到左侧（但它确实适用于文本）。

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

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

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

编辑：我发布了一张图片，当在 input[type=text] 上使用 padding-left 时会发生什么。它确实有效，但在右边你可以看到该字段发生了什么。领域变宽了。。

Answer 1

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

使用box-sizing属性来解决它。

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