สำหรับการเปลี่ยนสีของเครื่องหมายคาเร็ตการแทรก CSS คุณสมบัติคาเร็ตสี ถูกนำมาใช้
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS คาเร็ตสี
<!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>
ผลลัพธ์
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ตัวอย่าง
<!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>
ผลลัพธ์
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -