本文转载自：https://www.zhangxinxu.com/wordpress/2018/01/css-caret-color-first-line/
CSS caret-color属性可以改变输入框插入光标的颜色，同时又不改变输入框里面的内容的颜色。
代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input{
color: #333;
caret-color:red;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
caret-color属性不仅对于原生的输入表单控件有效，设置contenteditable的普通HTML标签也适用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[contenteditable="true"]{
120px;
border: 1px solid #ddd;
padding: 3px;
line-height: 20px;
color: #333;
caret-color: red;
}
</style>
</head>
<body>
<div contenteditable="true">文字</div>
</body>
</html>
兼容性
caret-color属性目前Chrome和Firefox基本上可以放心使用，但是Safari以及IE浏览器还有些问题。
二、其他方法改变输入框的闪烁的光标颜色
对于IE浏览器，其光标颜色看上去是永远固定的黑色，并不跟随输入框的颜色color变化，因此对于IE浏览器，是没有什么好方法的。
但是，对于Safari浏览器，由于输入框控件的闪烁光标颜色是和设置的color属性颜色一致，因此我们是有手段可以对光标进行控制的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input {
color: red;
}
input::first-line {
color: #333;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
借助::first-line伪元素的方法在Chrome，Safari浏览器下表现良好，但是Firefox浏览器并不支持，其表现为输入框里面的内容不属于::first-line，因此，整个输入框文字都是红色。
对于不支持::first-line方法的浏览器，相关CSS会污染正常的样式表现，因此我们需要区分处理，例如可以这样：
input, input::first-line {
color: #333;
}
@supports (-webkit-mask: none) {
input { color: red; }
}
然而这种方法也有局限性，对于