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 e开发者_StackOverflow社区xactly where it would be if the text was visible.

---

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.

---

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

---

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.