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>
1K+ Views
