Hide cursor in textarea

Question

I would like to add a linux style command line to my HTML/CSS site. I made a Span and would like to put a Textarea next to it to simulate the input. But I can't get rid of the blinking "cursor" (the straight line) in the Textarea. Does anyone know how I can hide the "Cursor"?

I want to do it in HTML/CSS only if it's possible.

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

nicolo@luescher:~$_

user_6764107 · Answer

2020 Answer:

textarea {
  caret-color: transparent;
}

All modern browsers support!! Chrome 57+, Edge, Firefox 53+, Safari 11.1+

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

caniuse: https://caniuse.com/?search=caret-color (94.53% up to 2021-07-28)

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


textarea{
caret-color: transparent;
}

Hello World

Hide cursor in textarea

3 Answers