caret-color Archives - Lena Design

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.