<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>
</div>

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;
}