Cursor disappears in Firefox
January 22nd, 2007 by 
Marius Hanganu
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:firefox, cursor, caret, invisible, dissapear, overflow, html
Posted in HTML, Javascript | 
January 23rd, 2007 at 4:20 pm
Great news!!! Thanks!
February 9th, 2007 at 7:53 pm
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….
February 16th, 2007 at 5:57 am
Omigod. This blog post has saved me hours of work. Thank you thank you thank you.
September 5th, 2007 at 12:36 am
And done nothing for me. First page in google for my search terms “cursor disappears in firefox”.
September 24th, 2007 at 11:44 pm
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
October 5th, 2007 at 6:45 pm
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.
November 20th, 2007 at 8:45 pm
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);
January 15th, 2008 at 3:34 am
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…
January 24th, 2008 at 12:56 pm
Hi Sameers,
The positon:fixed method worked fine for me.
Thanks
K
January 30th, 2008 at 1:51 pm
The position: fixed was the reliable way of fixing it for me too - the overflow: auto wasn’t consistent
February 6th, 2008 at 9:32 pm
If position:fixed causes your text to go funny, use position:relative
thanks
V
March 14th, 2008 at 7:34 pm
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?
March 14th, 2008 at 7:35 pm
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?
March 25th, 2008 at 10:20 pm
I tried every Fix - none id working.
This being a very old and annoying Bug - has Mozilla ever commented on it?
April 15th, 2008 at 2:12 am
Here you get some info!
https://bugzilla.mozilla.org/attachment.cgi?id=98624&action=edit
May 9th, 2008 at 4:02 pm
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
May 9th, 2008 at 4:03 pm
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
May 9th, 2008 at 4:06 pm
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
June 24th, 2008 at 11:21 pm
worked for me. : )
Thanks.
July 16th, 2008 at 1:43 am
You should be awarded the Nobel prize for this. Thank you!
September 24th, 2008 at 8:26 am
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.
October 20th, 2008 at 11:45 am
There are several issues with the caret disappearing in Fx, all with slightly different causes.
The one I’ve been battling with is where you have a fixed-position element under an input, and none of the ‘normal’ fixes seem to work.
I’ve created a JS solution which fixes that issue, although it brings with it a rendering bug, so it might not be right for everyone:
http://www.codecouch.com/2008/10/fixing-a-disappearing-caret-in-firefox/
Dan