Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

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


สำหรับการเปลี่ยนสีของเครื่องหมายคาเร็ตการแทรก 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>

ผลลัพธ์

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

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

ตัวอย่าง

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

ผลลัพธ์

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

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