在文本区域中隐藏光标

Question

我想在我的HTML/CSS网站中添加一个Linux风格的命令行。我创建了一个Span，想要在它旁边放置一个Textarea来模拟输入。但是我无法去掉Textarea中闪烁的“光标”（直线）。有人知道如何隐藏这个“光标”吗？

如果可能的话，我希望只使用HTML/CSS来实现。

#name {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 5%;
  color: rgb(0, 255, 0);
  /*text-align: center;*/
  font-family: "Lucida Console";
  font-size: 50pt;
}

blink {
  animation: blink 1.2s infinite;
}

@keyframes blink {
  0% {
    visibility: hidden;
  }
  40% {
    visibility: hidden;
  }
  50% {
    visibility: visible;
  }
  90% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}

<div id="name"><span>nicolo@luescher:~$<blink>_</blink></span></div>

- Nicolo Lüscher

---

可能是重复的问题，与“如何使用CSS或Javascript在网页中隐藏光标？”相关。 - rlemon

编辑1：我忘记在代码片段中添加Textare了-.-<div id="name"><span>nicolo@luescher:~$<blink>_</blink><textarea></textarea></span></div> - Nicolo Lüscher

编辑2: 我不是指鼠标光标。我是指Textarea中闪烁的行。(因为我添加了自己的“光标”) - Nicolo Lüscher

可能是如何从输入类型文本框中删除闪烁光标的重复问题。 - Arun CM

Answer 1

您可以使用text-shadow来获得只有透明字体颜色，并使用text-shadow，这样当您在textarea中单击时，您将不会得到光标，但仍然可以在其中写入内容。

下面是我发布的示例：

textarea {
  color: transparent;
  text-shadow: 0px 0px 0px tomato;
}

<textarea></textarea>

- LKG

---

完全符合我的要求。完美的。谢谢。 - Nicolo Lüscher

很高兴能帮助你。 - LKG

Answer 2

2020答案：

textarea {
  caret-color: transparent;
}

所有现代浏览器都支持！Chrome 57+、Edge、Firefox 53+、Safari 11.1+。

MDN文档：https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

caniuse: https://caniuse.com/?search=caret-color（截至2021年7月28日，支持率为94.53%）

textarea{
width:300px;
height:60px;
}


textarea{
caret-color: transparent;
}

<textarea placeholder="Type Here">Hello World</textarea>

- Chester Fung

Answer 3

我曾经这样做：

   textarea:hover{
     cursor: none; 
    }

是你想隐藏光标的地方 :)

- user8198431