<input value="I have a custom caret color!">

html, body { height: 100%; }
body { background: linear-gradient(red,orange,yellow,green,blue,purple) no-repeat 0 0; }

@keyframes rainbow {
  0% { caret-color: red; }
  20% { caret-color: orange; }
  40% { caret-color: yellow; }
  60% { caret-color: green; }
  80% { caret-color: blue; }
  100% { caret-color: purple; }
}

input {
  padding:20px;
  font-size:18px;
  width:100%;
  caret-color: red;
  display: block;
  margin-bottom: .5em;
}

input:focus {
  animation: 3s infinite rainbow;
}body {
  background-color: #a3d5d3;
}