Show just cursor (caret) but hide the letters in input

Question

Is there a css way to show a cursor in a transparent input? I keep googling and all that pops up is how to hide it!

<input class='transparent' />

.transparent{
 color:transparent;
 background:transparent;
}

To be absolutely clear the only thing I want to show up in the input is the cursor, nothing else - i.e. the text should be hidden but the cursor should still be visible.

Answer 1

You could style the text not touching the caret using the text-fill-color feature of webkit.

 .transparent{
   background:transparent;
   color:black;   /* sets the color of both caret and text */
   -webkit-text-fill-color: transparent; /* sets just the text color */
 }

<input class='transparent' />

The feature isn't supported by all the browsers, but the recent versions of the most widely-used browsers do support it.

Answer 2

I managed to solve this using the caret-color CSS property in input, text areas and content-editable divs: https://css-tricks.com/almanac/properties/c/caret-color/

input,
textarea,
[contenteditable] {
  caret-color: red;
}

Keep the color property as transparent for the text.