คุณสมบัติ caret-color

คุณสมบัติ caret-color กำหนด สีของเคอร์เซอร์ข้อความใน input ซึ่งปรากฏขึ้นเมื่อมีการป้อนข้อความ คุณสมบัตินี้สามารถรับค่าได้สองค่า: auto (ค่าเริ่มต้น) และสี ที่ผู้ใช้เลือก

ไวยากรณ์

selector {
	caret-color: auto หรือ สี;
}

ตัวอย่าง

มาดูการกำหนดสีเคอร์เซอร์ข้อความ เริ่มต้นกัน:

<input>

input {
	padding: 5px;
	caret-color: auto;
}

ตัวอย่าง

ตอนนี้เรามาเปลี่ยนสีเคอร์เซอร์ข้อความ เป็นสีน้ำเงินกัน:

<input>

input {
	padding: 5px;
	caret-color: blue;
}

ดูเพิ่มเติม

pseudoclass :fullscreen,
ซึ่งกำหนดสไตล์ให้กับองค์ประกอบในโหมดเต็มหน้าจอ
pseudoclass :indeterminate,
ซึ่งกำหนดสไตล์ให้กับสวิตช์ที่อยู่ในสถานะไม่แน่นอน
pseudoclass :focus-within,
ซึ่งกำหนดสไตล์ให้กับองค์ประกอบที่อยู่ในโฟกัส