การเปลี่ยนสีเคอร์เซอร์ (Cursor) ด้วย CSS caret-color

สำหรับการเปลี่ยนสีของเคอร์เซอร์ (insertion caret) ใช้คุณสมบัติ caret-color ใน CSS

ตัวอย่างที่ 1: การตั้งสีเคอร์เซอร์แบบกำหนดเอง

<!DOCTYPE html> 
<html> 
<head> 
<style> 
form { 
  padding: 2%; 
  margin: 2%; 
  text-align: center; 
} 
form:focus-within { 
  box-shadow: 0 0 10px rgba(0,0,0,0.6); 
  background-color: beige; 
} 
input { 
  font-size: 3em; 
  caret-color: chartreuse; 
  margin: 2%; 
} 
</style> 
</head> 
<body> 
<form> 
<input value="Check the caret color!" /> 
<button>Hit!</button> 
</form> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

ตัวอย่างที่ 2: การทำให้เคอร์เซอร์โปร่งใส

<!DOCTYPE html> 
<html> 
<head> 
<style> 
form { 
  padding: 2%; 
  margin: 2%; 
  background-color: thistle; 
} 
form:focus-within { 
  box-shadow: 0 0 10px rgba(0,0,0,0.6); 
} 
textarea { 
  caret-color: transparent; 
} 
</style> 
</head> 
<body> 
<form> 
<input type="radio" />1 
<input type="radio" />2 
<textarea placeholder="Invisible"></textarea> 
</form> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้: