The caret-color property specifies the color of the insertion caret (cursor). It is a thin vertical line, which is easily noticeable due to its flash. By default, this caret is black. However, the caret-color property allows applying any color to the caret.
| Initial Value | auto |
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.caretColor = "#1c87c9"; |
Syntax
caret-color: auto | color;Example of the caret-color property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.caret-example1 {
caret-color: transparent;
}
.caret-example2 {
caret-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Caret-color property example</h2>
<input value="Default caret color">
<br>
<br>
<input class="caret-example1" value="Transparent caret color">
<br>
<br>
<input class="caret-example2" value="Custom caret color">
</body>
</html>Faking the caret-color property
There exists a method of faking it by making the text transparent with the help of the -webkit-text-fill-color property and using the text-shadow property make the text to show back up, coloured.
Values
| Value | Description |
|---|---|
| auto | Sets the current color of the text. This is the default value. |
| color | Specifies a color for the caret. |
| initial | It makes the property use its default value. |
| inherit | It inherits the property from its parents element. |
Browser support
|
|
|
|
|
|---|---|---|---|---|
| 57.0+ | ✕ | 53.0+ | 11.1+ | 44.0+ |
Practice Your Knowledge
What is the function of the CSS caret-color property?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.