本文转载自：https://www.zhangxinxu.com/wordpress/2018/01/css-caret-color-first-line/
CSS caret-color属性可以改变输入框插入光标的颜色，同时又不改变输入框里面的内容的颜色。
代码为： Document
caret-color属性不仅对于原生的输入表单控件有效，设置contenteditable的普通HTML标签也适用。
Document 文字
caret-color属性目前Chrome和Firefox基本上可以放心使用，但是Safari以及IE浏览器还有些问题。
二、其他方法改变输入框的闪烁的光标颜色
对于IE浏览器，其光标颜色看上去是永远固定的黑色，并不跟随输入框的颜色color变化，因此对于IE浏览器，是没有什么好方法的。但是，对于Safari浏览器，由于输入框控件的闪烁光标颜色是和设置的color属性颜色一致，因此我们是有手段可以对光标进行控制的。
Document
借助::first-line伪元素的方法在Chrome，Safari浏览器下表现良好，但是Firefox浏览器并不支持，其表现为输入框里面的内容不属于::first-line，因此，整个输入框文字都是红色。
对于不支持::first-line方法的浏览器，相关CSS会污染正常的样式表现，因此我们需要区分处理，例如可以这样：
input, input::first-line { color: #333;}@supports (-webkit-mask: none) { input { color: red; }} 然而这种方法也有局限性，对于这种多行输入控件就无能为力，因为::first-line只能控制首行元素颜色。
三、两种实现方法综合 综合上面两种方法，可以得到最佳实践如下：如果浏览器支持caret-color属性，优先使用caret-color（Chrome/Firefox/Opera）；其次使用::first-line方法（Safari）；最后忽略（如IE）。
input { color: #333; caret-color: red;}@supports (-webkit-mask: none) and (not (cater-color: red)) { input { color: red; } input::first-line { color: #333; }} 
后记：珍惜时间，好好加油
---恢复内容结束---
本文转载自：https://www.zhangxinxu.com/wordpress/2018/01/css-caret-color-first-line/ CSS caret-color属性可以改变输入框插入光标的颜色，同时又不改变输入框里面的内容的颜色。 代码为： Document
caret-color属性不仅对于原生的输入表单控件有效，设置contenteditable的普通HTML标签也适用。
Document 文字
caret-color属性目前Chrome和Firefox基本上可以放心使用，但是Safari以及IE浏览器还有些问题。
二、其他方法改变输入框的闪烁的光标颜色
对于IE浏览器，其光标颜色看上去是永远固定的黑色，并不跟随输入框的颜色color变化，因此对于IE浏览器，是没有什么好方法的。但是，对于Safari浏览器，由于输入框控件的闪烁光标颜色是和设置的color属性颜色一致，因此我们是有手段可以对光标进行控制的。
Document
借助::first-line伪元素的方法在Chrome，Safari浏览器下表现良好，但是Firefox浏览器并不支持，其表现为输入框里面的内容不属于::first-line，因此，整个输入框文字都是红色。
对于不支持::first-line方法的浏览器，相关CSS会污染正常的样式表现，因此我们需要区分处理，例如可以这样：
input, input::first-line { color: #333;}@supports (-webkit-mask: none) { input { color: red; }} 然而这种方法也有局限性，对于这种多行输入控件就无能为力，因为::first-line只能控制首行元素颜色。
三、两种实现方法综合 综合上面两种方法，可以得到最佳实践如下：如果浏览器支持caret-color属性，优先使用caret-color（Chrome/Firefox/Opera）；其次使用::first-line方法（Safari）；最后忽略（如IE）。
input { color: #333; caret-color: red;}@supports (-webkit-mask: none) and (not (cater-color: red)) { input { color: red; } input::first-line { color: #333; }}
后记：珍惜时间，好好加油