How to have transparent fonts except for the 'text-caret' in a textarea?

Question

I have a simple textarea and I need to make transparent letters while allowing the text-caret to be visible. When I apply the following rules then I get invisible caret:

Answer 1

This jsFiddle DEMO uses an online tutorial method that has been slightly modified to create a non-native browser text-caret along with transparent text.

Also, this jsFiddle New Method I created handles that goal differently but isn't IE8 friendly.

---

Status Update: I've improved the above jsFiddle DEMO with this newer version titled:

jsFiddle New Method that's Newer!!

The above jsFiddle version now allows the inside of the text-area to be clicked and the caret will respect that clicked location. This extra functionality was made possible by a great question and answer here.