Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Change Cursor Color with CSS caret-color
The cursor can be easily changed in CSS. For that, use the caret-color property. This will allow you to change the color in textarea, input, etc. The following examples illustrate the CSS caret-color property to change the cursor color on a web page.
Change the Cursor Color of the Input Element
The input is the field where data is entered by the user. To change the cursor color, the <input> is set with the caret-color property −
input { font-size: 3em; caret-color: chartreuse; margin: 2%; } Here is our form on a web page with the <input> −
<form> <input value="Check the caret color!" /> <button>Hit!</button> </form>
Example
The following is the code to change the cursor color of <input>. Place the cursor in the form and you will then see the change in the cursor color −
<!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> Change the Cursor Color of the Textarea Element
The Textarea allows a user to set a multi-line text like a paragraph in a form. To change the cursor color, the <textarea> is set with the caret-color property −
textarea { caret-color: red; } Here is our form with the <textarea> −
<form> <input type="radio" />1 <input type="radio" />2 <textarea placeholder="Invisible"></textarea> </form>
Example
The following is the code to change the cursor color of <textarea>. Place the cursor in the textarea and you will then see the change in the cursor 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> 
2K+ Views
