When we click on input fields, we see a blinking cursor. And the default color of this cursor for most of the browsers is black. But now you can change the cursor color to any color that you want.
To change the cursor color in CSS we use the caret-color property and this property can be applied to the inputs and text areas both.
The following example sets the cursor color to red for the input fields:
Example:
input{
caret-color: red;
}
Just like the inputs, you can also change the cursor color of the text areas.
See this example:
Example:
textarea{
caret-color: red;
}
The caret-color property can also be applied to the elements that have the contenteditable="true" attribute.
In case you don’t know, the contenteditable attribute is used to make an element editable. And this can even be applied to normal elements such as paragraphs, divs, lists, etc. to make them editable.
In the following example, we have made a paragraph editable by simply setting contenteditable="true" and have set its cursor color to red:
Example:
p{
caret-color: red;
}
