คุณสมบัติ CSS caret-color สำหรับเปลี่ยนสีเคอร์เซอร์

คุณสมบัติ caret-color ใช้กำหนดสีของเคอร์เซอร์ (text cursor / insertion point) ในช่องกรอกข้อมูล (input, textarea) หรือ element ที่มี contenteditable

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      caret-color: blue;
    }
  </style>
</head>
<body>
  <p>Place the mouse cursor below to see a blue color cursor</p>
  <input class="demo" value="Blue Cursor"><br><br>
</body>
</html>

ค่าที่ใช้ได้:

• auto (default): สีตามปกติ (มักจะเป็นสีของข้อความ color)
• <color>: ระบุสีได้ เช่น red, #ff0000, rgb(255,0,0), hsla(0,100%,50%,0.5)

การประยุกต์ใช้: เพิ่มความสอดคล้องกับธีมสีของเว็บไซต์ ทำให้ UI ดูสม่ำเสมอขึ้น รองรับบนบราวเซอร์สมัยใหม่ทุกตัว (IE ไม่รองรับ)