- This topic is empty.
March 3, 2015 at 5:19 pm #197223
I’m looking for a creative way to hide the text in a textarea, without hiding the caret. There is a straightforward solution in Chrome, using -webkit-text-fill-color: transparent. However outside of Chrome, the only option is to use
color: transparent, which unfortunately also makes the caret transparent.
Any suggestions are appreciated.March 4, 2015 at 9:49 am #197308
Here’s a rough codepen demo: http://codepen.io/nathank/pen/LEBddV
There is a textarea that perfectly overlays a div, with all of the same dimensions/fonts/etc. On Chrome the text in the textarea is transparent, and the caret is still visible. On Firefox, however, the text in the textarea is still visible; it is just sitting perfectly on top of the text below. I’m trying to figure out how to make the textarea text transparent in Firefox, while keeping the caret visible.
You won’t notice the problem in Firefox unless you make a small change. In codepen, at the top of the JS pane, set the delay = 300 instead of 30. Now place your caret at the beginning of the textarea and press enter. You will notice in Firefox that the text in the text area advances to the next line before the text in the div does, producing a ghosting effect. This is because there is a slight delay in updating the div. In Chrome, there is no ghosting effect because the text in the textarea is transparent.
- The forum ‘CSS’ is closed to new topics and replies.