對於web開發中，我們經常都看得到需要輸入內容的組件和元素，比如，textarea，或者可編輯的DIV(contenteditable) ，如果你也曾思考過使用相關方式修改一下光標顏色的，那麽這篇技術小分享，你絕對不應該錯過哈~

使用如下的CSS代碼即可實現光標顏色的設定

CSS

    input,
    textarea,
    [contenteditable] {
      caret-color: orange;
    }

相關HTML

  <input type="text" placeholder="郵件">
  <br><br>
  <textarea name="comments" id="" cols="30" rows="10"></textarea>
  <br><br>
  <div contenteditable>igeekbar.com - 請點擊我</div>

在線演示

地址：http://www.igeekbar.com/igclass/code/c986f33e-c8af-482d-ad98-984dbacbad60.htm

如果想更好玩的話，可以讓你的光標在輸入框中支持多顏色變化

CSS代碼

  @keyframes rainbow {
    0% { caret-color: red; }
    20% { caret-color: orange; }
    40% { caret-color: yellow; }
    60% { caret-color: green; }
    80% { caret-color: blue; }
    100% { caret-color: purple; }
  }

  input {
    padding:10px;
    font-size:18px;
    width:80%;
    caret-color: orange;
    display: block;
    margin-bottom: .5em;
  }

  input:focus {
    animation: 3s infinite rainbow;
  }body {
    background-color: orange;
  }

以上代碼使用keyframe來生成動畫效果，再設置為input:focus屬性中，這樣用戶點擊輸入框，都會生成不同的光標顏色， 非常有趣，大家有興趣可以點擊下面鏈接嘗試一下

在線演示：http://www.igeekbar.com/igclass/code/148e9cb3-61be-4954-9447-c931eb4e7c4d.htm

是不是有點意思， 如果大家有更好玩的光標CSS效果，請立刻留言和我分享，感謝閱讀~~

【代碼片段】如何使用CSS來快速定義多彩光標