css - 只显示光标(插入符号)但隐藏输入中的字母

Question

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

<input class='transparent' />

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

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

Answer 1

您可以使用 text-fill-color 设置不接触插入符号的文本样式。 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' />

并非所有浏览器都支持该功能，但最广泛使用的浏览器的最新版本确实支持它。