My note to myself : Dissapearing Firefox Caret (Cursor) CSS Fix

In FireFox (or any other Mozilla/Gecko based browser), the caret in input fields and textareas sometimes just disappears (viz. it’s not there). To be more precise it has something to do with input fields and textareas inside fixed-positioned elements. Found a CSS fix a few months ago, but forgot about it, so sticking a post-it on myself right now so my brain won’t let me down anymore.

Bramus!, you hufter, once and for all: To fix this “just” apply an overflow: auto; to the input and textarea elements!

@-moz-document url-prefix() {
	input[type="text"], input[type="password"], textarea {
		overflow: auto;
	}
}

Djeez, is it that hard to remember? 😛

B!

UPDATE (June 5, 2007) : Expanded the selector to only affect Mozilla/Gecko based browsers as an undo of the original CSS rule had to be made for Safari and Opera Undone in update #4.

UPDATE #2 (June 13, 2007) : Found in some CSS file of an old project the same fix, but with a slight twist : the overflow: auto; was applied to the fieldset and not the input nor the textarea.

UPDATE #3 (June 15, 2007) : Found the bugreport (dated September 10, 2002!!) on bugzilla and read that “This is fixed on the Gecko 1.9 trunk, which is what will become the backend for Firefox 3.0 once it’s released.”. Hoping it is so, as the other replies in that thread are quite obscure and contradicting …

UPDATE #4 (January 17, 2008) : Fixed this accordingly the @-moz-document Mozilla CSS Extension. Yes I know it looks broken, but it actually works. Doesn’t validate however.