zazvorniki zazvorniki - 5 months ago 23
CSS Question

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

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

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.