CODEWITHSUNDEEP
htmlcss
Nicolo Lüscher
Nicolo Lüscher

Reputation: 603

Hide caret in textarea

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 caret in the textarea. Does anyone know how I can hide the caret?

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>

Upvotes: 3

Views: 7247

Answers (3)

Chester Fung
Chester Fung

Reputation: 370

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>

Upvotes: 3

user8198431
user8198431

Reputation:

I used to do this: 

   textarea:hover{
     cursor: none; 
    }

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

Upvotes: 0

LKG
LKG

Reputation: 4192

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>

Upvotes: 3

Related Questions