input 光标字体颜色、初始位置

一、input光标颜色

在不同的场景下我们可能对input光标的颜色需求不同，这个往往和背景颜色相关。那么这个用CSS怎么改变呢?

1.使用color继承来实现

​ 整体发生改变，包括了即将输入的内容。

<div>
    <input style="color:red" />
</div>

2.使用caret- color来实现

​ 只改变光标的颜色，并不改变输入的内容的颜色

<div>
    <input style="caret-color:red;" />
</div>

二、input光标初始位置

1.使用 text-align 控制光标位置

​ 有三个属性值： left , center , right 分别是左中右。

<div>
    <input style="text-align:left" />
    <input style="text-align:center" />
    <input style="text-align:right" />
</div>

2.使用 text-indent 自定义控制光标位置

​ 为文本块中首行文本进行缩进。

<div>
    <input style="text-indent:10px" />
</div>