只显示光标（插入符号），但在输入中隐藏字母(Show just cursor (caret) but hide the letters in input)

只显示光标（插入符号），但在输入中隐藏字母(Show just cursor (caret) but hide the letters in input)

有没有一种css方式在透明输入中显示光标？ 我一直在用谷歌搜索，所有弹出的是如何隐藏它！

<input class='transparent' /> .transparent{ color:transparent; background:transparent; }

要绝对清楚，我想在输入中显示的唯一内容是光标，没有别的 - 即文本应该被隐藏但光标应该仍然可见。

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.

最满意答案

您可以使用webkit的text-fill-color功能设置不触及插入符号的text-fill-color 。

 .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' /> 
  
 
 
 所有浏览器都不支持该功能，但最广泛使用的浏览器的最新版本确实支持它。 
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.