Thay đổi màu con trỏ nhập liệu với CSS caret-color

Giới thiệu

Để thay đổi màu của con trỏ chèn (insertion caret), thuộc tính caret-color trong CSS được sử dụng.

Ví dụ 1: Màu con trỏ tùy chỉnh

<!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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau:

Ví dụ 2: Con trỏ ẩn (transparent)

<!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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: