Disappearing Cursor on Textbox

I encountered this problem in both IE and Firefox. When you tab to a certain textbox, the cursor does not appear (does not blink of course).

It works everything fine when the textbox was left-aligned. But since they were numeric fields, I need to right-align them, only to notice that the cursor disappears everytime focus is set to it, either view mouse or via keyboard tab.

The cursor appears however, if the textbox has value on it. I found an this article: http://blog.tremend.ro/2007/01/22/mouse-cursor-disappears-in-firefox/

It says that I need to set the container’s overflow to hidden in CSS:

.b-col {
/* other styles here */

overflow: hidden;

}

Wow, it works well in Firefox!

However, when I tests it on IE, it still disappears. After few minutes of knocking my head I came up with this solution. Since the cursor passed the overall width of the textbox making it invisible, we will make the overflow of the textbox to visible.

.num {
text-align: right;
overflow: visible;
}

It works in firefox! But once again, the dominating IE didn’t.
Another trick? Add right padding to the input element.

.num {
text-align: right;
overflow: visible;
padding-right: 2px;
}
This entry was posted in Web Development and tagged , , , , , , . Bookmark the permalink.

Related Posts

6 Responses to Disappearing Cursor on Textbox

  1. Molay says:

    Intelligent and helpful post.

  2. Jeff says:

    1st google hit… answer’s at the bottom but it’s works after all these years… thanks.

  3. lysender says:

    Wow, this old trick still works!

    Thanks for visiting.

  4. Amanda says:

    Thanks a million! You’re the man!

  5. Al says:

    Thank you so much! This is what I have been looking for

  6. ahmed says:

    Good idea .

Leave a Reply

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