The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Transparent text, visible caret?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #197223
    Nathan K


    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.

    So far the only solution I have is to implement a pseudo-caret using javascript, although a CSS solution/hack would likely be preferable.

    Any suggestions are appreciated.

    Nathan K

    I wish to apply different styles to different parts of a textarea. I’ve already accomplished this using a contentEditable div tag, but this has many shortcomings since it allows the user to paste not only plain text into the box, but also HTML elements (which ruin the formatting). There are ways around this, such as capturing ctrl+v with javascript, but this does not work when using the menubar to paste, or when using android to paste, for example.

    As a more robust solution, I got the idea to have a div in the backround, and a transparent textarea on top of it which the user inputs into. Javascript then processes the input before adding it to the background div to be displayed. This solution seems ideal because I want plain text input, but HTML output.

    Nathan K

    Here’s a rough codepen demo:

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.