如何使用CSS隐藏文本框光标闪烁？

Question

我在这里创建了一个语音识别实验：http://jsfiddle.net/3Sm9R/3/（只能在Chrome 11+中使用）。

然而，当点击输入时，会出现闪烁的光标。我想要隐藏它。最干净的方法是什么？

- Leo Jiang

---

也许你可以在这里找到答案：https://dev59.com/XUvSa4cB1Zd3GeqPf6T7 - Beto Aveiga

Answer 1

光标颜色跟随文本颜色。因此，当将颜色设置为透明时，光标将消失。

<input type="text" style="color: transparent;" x-webkit-speech />

- Marcel Verwey

---

欢迎来到SO。这是一个旧问题，所以您可能无法得到OP的回复。我的CSS知识很低，但您的建议是否也会隐藏文本？ - Neil Slater

是的，它会。但在我看来，当将其用于文本输入时，隐藏闪烁光标毫无意义。然而，在作为按钮使用时（在这种情况下），它确实有意义。 - Marcel Verwey

IE11即使设置透明颜色，也会显示闪烁的光标。有什么办法可以欺骗它吗？ - harry

@user3281466 - 你可以使文本透明（闪烁的光标也会消失），但同时使用CSS阴影，模拟在透明文本所在的完全相同位置出现的文本外观，这是非常优雅的解决方案。 - Artanis

光标实际上（相反地）遵循背景而不是文本颜色，因此通常光标是黑色，不是因为文本是黑色，而是因为背景是白色。 - Usman Zaheer

Answer 2

查看此答案

归结为input[type=text]{ cursor: none; }

编辑：看了你的jsfiddle，我现在意识到你正在使用新的语音输入类型，这似乎不起作用。

- idrumgood

---

这个问题中的“光标”实际上是文本插入符，而不是鼠标指针。因此无论如何，你的代码都无法实现他想要的功能。 - BoltClock

由于您的CSS与文本光标无关，因此光标指针仍然保持不变。 - Usman Zaheer