<div class="container">
  <input type="text" value="This field uses a default caret." autocomplete="off">
  <input type="text" value="I have a custom caret color!" class="custom" autocomplete="off">
  <p class="custom" contenteditable="true">This paragraph can be edited, and its caret has a custom color as well!</p>
body {
  height: 100vh;
  display: grid;
  place-items: center;
  font-family: Arial, sans-serif;

.container {
  width: calc(100% - 9em);

input {
  caret-color: auto;
  display: block;
  margin-bottom: .5em;
  width: 100%;
  font-family: Arial, sans-serif;
  height: 25px;

input.custom {
  caret-color: red;

p.custom {
  caret-color: green;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.