CSS 属性：caret-color

caret-color : 改变输入框光标颜色，同时又不改变输入框里面的内容的颜色

caret 表示‘插入符号’,指处于内容可插入状态的光标

input{
    color:blue;
    caret-color: red;
}

caret-color 属性不仅对于原生的输入表单控件有效，设置contenteditable的普通标签也适用。 contenteditable 属性: 规定是否可编辑元素内容.

chrome 和 safari 表现良好 但是firefox 不太支持 兼容性问题解决方案

.input1 {
  width: 200px;
  color: blue;
  caret-color: yellow;
}
//检测不支持 caret-color属性 
@supports ( not ( caret-color: yellow )) {
  .input1 {
    color: yellow;
  }
  .input1::first-line {
    color: blue;
  }
}