如何为输入字段文本添加填充 [CSS]答案

【问题标题】：How to add padding to input field text [CSS]如何为输入字段文本添加填充 [CSS]
【发布时间】：2018-06-01 22:49:46
【问题描述】：

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

这是我尝试过的：

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

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

Image link

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

Link 2

【问题讨论】：

什么是 TextInput ？
@melvin 这没有任何意义，我只是用它来解释我要做什么。

标签： css

【解决方案1】：

在输入上填充；对于输入字段或预设值参数的用户：

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

占位符上的填充：

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

【讨论】：

我只想移动文本，而不是输入字段本身。
当然，只需在占位符上添加一个填充，而不是输入
我做到了，我在占位符上添加了填充。现在我想为用户输入一些文本时出现的实际文本添加填充。
是的，我提供了占位符填充和输入填充 - 当用户键入一些文本时，将出现以输入为目标
其实恰恰相反。我想在实际文本上进行填充，我已经在占位符上进行了填充，如我提供的第一个链接所示。我想在不移动输入字段本身的情况下将文本（而不是占位符）移动到右侧。

【解决方案2】：

你必须给输入字段css如下

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

检查这个小提琴here

【讨论】：

这会将整个输入字段向左移动 10 个像素。我想移动输入字段内的文本。
@howdydoo 这不会移动输入 - 您将 padding 与 margin 混淆了
@Scoots 哦，我的错。但我不明白如何在不移动实际输入字段本身的情况下移动输入字段内的实际文本？
@howdydoo 检查我的答案中的小提琴或jsfiddle.net/melvinstanly/fjfyykvt
@howdydoo。希望它有所帮助。如果是真的，请将其标记为 aswer

【解决方案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 前缀实现跨浏览器兼容性。

【讨论】：