如何设置用户输入的文本样式？

【问题标题】：How do I style text input by a user?如何设置用户输入的文本样式？
【发布时间】：2020-07-27 17:43:57
【问题描述】：

我正在尝试将样式应用于用户输入表单的文本。我想弄清楚两件事：

(1) 如何缩进/添加内边距以使文本不接触元素的左边缘？

(2) 如何更改文本的字体和字体大小？

Here 是当前表单元素的图像，this 是我想要实现的目标。

【问题讨论】：

【解决方案1】：

您需要对样式表中的元素应用填充，或者给它一个类名或设置input 本身的样式。我在其中添加了一些不同的颜色，只是为了向您展示您可以采用不同的方式对其进行样式设置。

.my-input {
  padding: 10px;
  border: 1px solid blue;
  border-radius: 4px;
  color: pink;
}

&lt;input type="text" value="some text value" class="my-input" /&gt;

【讨论】：

【解决方案2】：

input{
 padding-left:7px;
 font-style:italic;
 font-size:2em;
}

<form>
<input type="text"></input>
</form>

【讨论】：