如何在输入字段文本中添加填充[CSS]

Question

我有一个简单的问题，我知道我可以使用CSS编辑输入字段的占位符文本。但我想知道如何添加填充到实际文本（用户输入的文本）。我在下面提供了一个图片，我在占位符文本中添加了填充，但是我很难在输入字段的实际文本中添加填充，以便它与占位符文本对齐。

以下是我的尝试：

.form TextInput {
  padding-left: 10px;
}

这显然不起作用，我只是想知道其他人是否有解决方案？

Image link

编辑：我不是试图移动输入字段本身，只是移动内部的文本。就像我对占位符所做的那样，但这次我只想移动文本以匹配占位符的位置。

Link 2

Answer 1

您必须按如下方式将css提供给输入字段

.form input[type="text"]{
  padding:10px;
}

检查这个小提琴here

Answer 2

填充输入;对于在字段中键入的用户或预设值参数：

.form input[type="text"] {
    box-sizing: border-box;
    padding-left: 10px;
}

填充占位符：

.form input::placeholder {
    padding: 10px;
}

Answer 3

1 - 输入填充，用户可以输入：

.form input.TextInput { 
  padding-left: 10px;
}

2 - 输入占位符的填充：

.form input.TextInput::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  padding-left: 10px;
}
.form input.TextInput::-moz-placeholder { /* Firefox 19+ */
  padding-left: 10px;
}
.form input.TextInput:-ms-input-placeholder { /* IE 10+ */
  padding-left: 10px;
}
.form input.TextInput:-moz-placeholder { /* Firefox 18- */
  padding-left: 10px;
}

使用css前缀实现跨浏览器兼容性。