CODEWITHSUNDEEP
csscaret
antonis
antonis

Reputation: 31

How to hide textarea but keep caret visible?

I wonder if I can keep a caret visible while reducing a textarea's opacity to zero. Actually, what I want to do is to render text strings invisible while having a visible caret that's exactly where it would be if the text was visible.

Upvotes: 3

Views: 2496

Answers (3)

Sebastian Zartner
Sebastian Zartner

Reputation: 20125

The CSS3 UI spec. defines a caret-color property, which allows you to style the caret independently from the text.

Unfortunately that property is not implemented in browser yet, as far as I know. For Gecko (Firefox) there is at least a bug report for it.

Upvotes: 0

jackJoe
jackJoe

Reputation: 11168

You could use a pseudo-element like this:

p.article::first-letter {
  color: #ff0000;
}

for an HTML like this:

<p class="article">A paragraph in an article</p>

Check this link: http://www.w3schools.com/CSS/CSS_pseudo_elements.asp

Upvotes: 0

madcampos
madcampos

Reputation: 460

Yes, it's possible using the color property on the textarea. Setting it to transparent will make the text transparent. Also, if you don't want the text to be selected you should set the user-select property to none.

Upvotes: 0

Related Questions