CSS caret-color Property
CSS caret-color property is used to set the color of the insertion caret, which represents the visible marker where the next character typed gets inserted. Sometimes, this is referred to as the text input cursor. The caret appears in the elements like input or the ones with the content editable attribute. The caret is basically a thin vertical line, flashing to help in making it more noticeable. By default, the value is black. But the color may also be altered with this property.
Syntax for caret-color Property
Following is the syntax for the caret-color property.
caret-color: auto|color|initial|inherit;
Example: CSS caret-color Property
Here in the example below, we are using the caret-color property with different border widths, styles, and their different values. In this case, we have given the caret-color as auto, red and blue i.e; using all the values of this property. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>The caret-color property in CSS</title>
<style type="text/css">
input {
caret-color: auto;
display: block;
margin-bottom: .5em;
}
input.custom {
caret-color: red;
}
p.custom {
caret-color: blue;
}
</style>
</head>
<body>
<input value="This field uses a default caret." size="64" />
<input class="custom" value="I have a custom caret color!" size="64" />
<p contenteditable class="custom">This paragraph can be edited, and its caret has a custom color as well!</p>
</body>
</html>
Output:
Example 2: CSS caret-color Property
Here in the example below, we are using the caret-color property with different border widths, styles, and their different values. In this case, we have given the caret-color as red. But it does not get colored in red, as it is the caret-color property. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Caret-color property in CSS</title>
<style type="text/css">
div{
background-color: pink;
caret-color: red;
border: 8px solid red;
}
.border-box{
caret-color: red;
}
</style>
</head>
<body>
<div class="border-box">Study Tonight</div>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
57 |
57 |
| Edge |
79 |
79 |
| Firefox |
53 |
53 |
| Internet Explorer |
no |
no |
| Opera |
44 |
44 |
| Safari |
11.1 |
11.1 |
| Webview Android |
57 |
57 |
| Chrome Android |
57 |
57 |
| Firefox Android |
53 |
53 |
| Opera Android |
43 |
43 |
| IOS Safari |
11.3 |
11.3 |
| Samsung Internet |
7.0 |
7.0 |
Conclusion
The initial value for the caret-color property is auto. This property is applicable to all elements. It is an inherited property. The computed value of this property is auto, computed as specified and color values get computed as defined for the color property. The animation type for this property is a color.
