
The CSS caret-color property defines the colour of the cursor in inputs, textareas (or any element that is editable).
Syntax:
caret-color: auto|color;
auto (default) -the browser uses the current colour for the cursor.
color – defines a colour to use for the cursor (all legal colour values can be used: rgba, hex etc).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
caret-color: green;
}
.ex2 {
caret-color: transparent;
}
.ex3 {
caret-color: orange;
}
</style>
</head>
<body>
<input value="Default caret color"></br>
<input class="ex1" value="Green caret color"></br>
<input class="ex2" value="Transparent caret color"></br>
<p contenteditable class="ex3">This paragraph can be edited. Its caret has an orange color.</p>
</body>
</html>
Output:
This paragraph can be edited. Its caret has an orange color.
Read also: