Disappearing Cursor in Firefox

Published on May 7, 2008

Problem

The current version of Firefox (mine is 2.0.0.14) has a bug that makes the cursor in text fields and text areas disappear inside of divs in some cases. From the bug report:

Steps to Reproduce:
1. create a division with data and set style.overflow="auto" or "scroll"
2. create a second division with INPUT elements (type=text)on top(higher
z-index)
3. focus on the INPUT elements

Actual Results:
cursor position is not visible

Expected Results:
blinking cursor position in the INPUT element being focused

Workaround

One workaround I found that seems to do the trick is to add a child element (usually a div) with the style position: fixed. Alas, the trick involves an additional element of markup, but at least won’t confuse your users.

If you enjoyed this article, please share it with a friend!

3 Responses to Disappearing Cursor in Firefox

  1. Spencer says:
    May 7, 2008 at 9:22 pm

    Wow, haven’t seen that before. Writing down the workaround in Snippely now…

  2. Coder says:
    June 17, 2008 at 1:49 pm

    Thnaks Man! it worked like a charm!!!!

  3. Aftab says:
    November 17, 2008 at 4:22 am

    Try adding

    to the div that contains the input fields. Simply using “overflow:hidden” does not work, it must be “overflow-x:hidden”.