Question

我想在我的HTML / CSS网站上添加一个linux样式的命令行。我做了一个Span，并希望在它旁边放一个Textarea来模拟输入。但我无法摆脱闪烁的光标＆＃34; Textarea中的（直线）。有谁知道我怎么能隐藏＆＃34;光标＆＃34;？

我希望只有在可能的情况下才能在HTML / CSS中进行。

＆＃13;

#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;
  }
}

＆＃13;

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

＆＃13;

Answer 1

您可以使用text-shadow获取tranparent字体颜色并使用text-shadow，因此当您点击textarea时，您将无法获得cursor但仍然你可以写进去。

以下是我发布的示例

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

<textarea></textarea>

Answer 2

我曾经这样做过：

   textarea:hover{
     cursor: none; 
    }

textarea是您希望隐藏光标的地方：）

Answer 3

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-07-28 为 94.53%）

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


textarea{
caret-color: transparent;
}

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

将光标隐藏在textarea中

3 个答案: