Firefox has this annoying problem of the cursor caret becoming invisible sometimes. For example, when showing up a div, the textboxes inside that div don’t have the cursor. You can edit them, but you can’t really know where exactly the cursor is. This can be very frustrating when editing texts in input boxes.

The mouse doesn’t actually dissapear, as one friend cleverly noticed. If you move your div around, you’ll find it blinking somewhere underneath. This has nothing to do whatsoever with z-index, but with div’s scrolling as some people point out .

So basically, to make your caret visible, you’d have to replace your div’s style from something like:

overflow: auto

to

overflow: hidden;

This helped me get rid of the invisible cursor problem. I guess other overflow values will work as well, except for auto.
br />

technorati tags:, , , , , ,

24 responses to “Cursor disappears in Firefox

  1. I saw the cursor vanishs if you have position:fixed inserted into style
    if you put this code below into a page the cursor is gone in FF

    div{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    }
    html>body>div{ /*hidden from IE*/
    position:fixed: /*this is the problem*/
    }

    some formfields….

  2. I have been fighting with this from days and found on many places that div with style=overflow:hidden or auto works. But didn;t worked for me. Atlast, I tried positio:fixed on div which wraps textbox and it works. At the same time, if you set the textbox style = position:fixed, it works.

    I got positioning problems now, which may be wasting more time of mine. Lets see if any other solution available.

    Sameers

  3. Thanks Sameers,
    Applying position:fixed to the div worked.

    Though it causes some positioning problem, it solved the problem to a good extend.

    Happy Coding,
    Gopal.

  4. Similar problem happens w/ GWT and FireFox. If you have TextBox element with cursor inside and make

    element.setVisible(false);

    Cursor disappears and never return until page reload. Workaround for this thing is to remove focus before disabling element:

    element.setFocus(false);
    element.setVisible(false);

  5. Thanks for posting this… My 2 cents: I had a similar problem: if a I had a div with an input field that had focus – then I hid that Div, my cursor would disappear for good.

    If, before hiding the div, I removed focus from the input (input.blur()) everything works fine…

  6. I tried position:fixed to no avail.

    I have a div with overflow:hidden, holding a table with search boxes. IE6 and only IE6 I cant get teh cursor to show.

    Put position fixed on the div and on the inputs directly – no luck. Any other thoughts?

  7. I tried position:relative to no avail.

    I have a div with overflow:hidden, holding a table with search boxes. IE6 and only IE6 I cant get teh cursor to show.

    Put position relative on the div and on the inputs directly – no luck. Any other thoughts?

  8. I tried every Fix – none id working.
    This being a very old and annoying Bug – has Mozilla ever commented on it?

  9. For me the only thing that worked was to warp the table that contained all the inputs with

    “overflow:hidden” did not work.

    hopefully this is consistent, not sure though

  10. For me the only thing that worked was to warp the table that contained all the inputs with
    \
    “overflow:hidden” did not work.

    hopefully this is consistent, not sure though

  11. Sorry, I am having problems to post this, lets see if it works now

    For me the only thing that worked was to warp the table that contained all the inputs with
    <div style="overflow-x:hidden">
    “overflow:hidden” did not work.

    hopefully this is consistent, not sure though

  12. Thanks Hugo your solution worked for me..

    Hugo said:
    For me the only thing that worked was to warp the table that contained all the inputs with

    “overflow:hidden” did not work.

    Thanks again.

  13. The css and js fixes, described above didn’t work for me.

    I have div container for a textbox, this div has style “display: none”;
    I add special class “visible” to the wrapper tag of this div to make the div visible;
    That works great in all browsers, except for FF. In FF cursor caret becomes invisible.

    The solution that worked for me is:

    div.textbox_container {display:none;}
    . visible div.textbox_container {display:block;}
    div.textbox_container, x:-moz-any-link {display:block; visibility:hidden; height:0px; overflow:hidden;}
    . visible div.textbox_container, x:-moz-any-link {display:block; visibility:visible; height:auto;}

    Notes:
    The first and second lines work for all browsers, except for FF;
    The third and forth lines work in FF only

    .style, x:-moz-any-link {…} – css hack for FF only

    It’s important to use this style for FF only, in my case, applying this style for all browsers caused bug in Opera, similar with the one, that I tried to rid in FF. I’m not quite sure about all other browsers.
    I have found this css hack for FF only, just recently, so I couldn’t be sure about how reliable it is. Though, it works right in my case.

Leave a Comment:

Your email address will not be published. Required fields are marked *