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

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

Possible duplicate of [Is it possible to hide the cursor in a webpage using CSS or Javascript?](https://stackoverflow.com/questions/1071356/is-it-possible-to-hide-the-cursor-in-a-webpage-using-css-or-javascript) — rlemon, Jun 30 '17 at 11:52
EDIT 1: I forgot to add the Textare in the Code-Snippet -.-
nicolo@luescher:~$_ — Nicolo Lüscher, Jun 30 '17 at 11:52
EDIT 2: I don't mean the mouse cursor. I mean the blinking line in the Textarea. (since I added my own "cursor") — Nicolo Lüscher, Jun 30 '17 at 11:57
Possible duplicate of [How to remove the Blinking Cursor from an input type textbox](https://stackoverflow.com/questions/23515754/how-to-remove-the-blinking-cursor-from-an-input-type-textbox#answer-23516280) — Arun CM, Jun 30 '17 at 12:11

score 3 · Accepted Answer · answered Jun 30 '17 at 12:01

3

You can use text-shadow to get it just tranparent font color and use text-shadow so when you click in textarea you will not get cursor but still you can write in it.

Below is example i posted

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

<textarea></textarea>

answered Jun 30 '17 at 12:01

LKG

4,152
1
11
21

exactly what I was looking for. perfect. Thank you – Nicolo Lüscher Jun 30 '17 at 12:04
Happy to help you. – LKG Jun 30 '17 at 12:04

score 1 · Answer 2 · answered Jul 27 '21 at 20:57

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

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

score 0 · Answer 3 · answered Jun 30 '17 at 12:26

0

I used to do this:

   textarea:hover{
     cursor: none; 
    }

textarea is where you want the cursor to be hidden :)

answered Jun 30 '17 at 12:26

Hide cursor in textarea

3 Answers3

Linked