一、caret-color 屬性作用

caret-color : 改變輸入框游標顏色，同時又不改變輸入框裡面的內容的顏色

caret 表示‘插入符號’,指處於內容可插入狀態的游標

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

caret-color 屬性不僅對於原生的輸入表單控制元件有效，設定contenteditable的普通標籤也適用。
contenteditable 屬性: 規定是否可編輯元素內容.

HTML:

<div contenteditable="true">文字藍色，游標黃色</div
 
>

CSS:

[contenteditable = "true"] {
  margin-left: 20px;
  font-size: 30px;
  color: blue;
  caret-color: yellow;
}

二、caret-color 的相容情況

目前 Chrome 和 Firefox 基本可以使用，但是 Safari 以及 IE 瀏覽器則暫時還不支援。

三、解決相容性問題

思路：

1. Chrome 和 Firefox 使用原生的 caret-color 屬性
2. Safari 使用 :first-line 實現
3. IE 瀏覽器放棄

解釋：

1. IE 瀏覽器的游標顏色永遠是固定的黑色，並不跟隨輸入框的顏色 color 變化，因此對於 IE 瀏覽器沒有好的辦法；
2. Safari 瀏覽器，由於輸入框控制元件的閃爍游標顏色和設定的 color 屬性顏色一致，所以可以對游標進行控制。

侷限性：

1. :first-line ：在 Chrome, Safari 瀏覽器表現良好，但是在 Firefox 瀏覽器並不支援，其表現為 input 輸入框裡面的內容不屬於 :first-line，因此整個輸入框文字都是紅色的。
2. 對於 <textarea> 多行輸入控制元件無效，因為 :first-line
   只能控制首行元素顏色。
3. 微信小程式暫不支援 :first-line 偽類。

HTML:

<input type="text" class="third" placeholder="相容性寫法">

CSS:

.third {
  width: 1000px;
  font-size: 30px;
  margin: 20px;
  box-sizing: border-box;
  color: red;
  caret-color: blue;
}

@supports ( -webkit-mask: none ) and ( not ( caret-color: blue )) {
  .third {
    color: blue;
  }
  .third::first-line {
    color: red;
  }
}

四、 資料

學習資料來自張鑫旭的部落格 ——CSS改變插入游標顏色caret-color簡介及其它變色方法

CodePen：https://codepen.io/JiaxiaLi/pen/YOrwZP