CSS caret-color Property - Playground Example

« Back to CSS caret-color Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input {
   caret-color: auto;
   display: block;
   margin-bottom: .5em;
}
input.custom {
   caret-color: green;
}
p.custom {
  caret-color: red;
}
</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>

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee