只显示光标（插入符号）但隐藏输入中的字母

Question

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

<input class='transparent' />

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

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

Answer 1

您可以使用webkit的 .transparent{ background:transparent; color:black; /* sets the color of both caret and text */ -webkit-text-fill-color: transparent; /* sets just the text color */ }功能设置不接触插入符的文本样式。

＆＃13;

＆＃13;

<input class='transparent' />

＆＃13;

series: [
    {"name":"2012","data":[692101643,716334837,776991835,769420169 ]},
    {"name":"2013","data":[860859252,825852169,895524501,892930333 ]}
]

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

我设法在输入，文本区域和内容可编辑的div中使用caret-color CSS属性来解决此问题： https://css-tricks.com/almanac/properties/c/caret-color/

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

将文本的颜色属性保留为transparent。