In CSS3, there is now a native way to do this, without any of the hacks suggested in the existing answers: the caret-color
property.
There are a lot of things you can do to with the caret, as seen below. It can even be animated.
/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;
/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);
The caret-color
property is supported from Firefox 55, and Chrome 60. Support is also available in the Safari Technical Preview and in Opera (but not yet in Edge). You can view the current support tables here.