« | Home | »

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

firefox.gifIn 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!

PLAIN TEXT
CSS:
  1. @-moz-document url-prefix() {
  2.     input[type="text"], input[type="password"], textarea {
  3.         overflow: auto;
  4.     }
  5. }

Djeez, is it that hard to remember? :P

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.

Spread the word!

  • del.icio.us
  • digg
  • Ma.gnolia

About this entry

Date Published
Published:
May 31 2007 / 3:23 pm
Categories
Categories:
Another Dailie, Bramus!, CSS, Digg This!, Webdevelopment
Comments
Comments:
3 Comments
Jump to comment form

Best of Bram.us

My iSmudginator 0.2
My iSmudginator 0.2
Start getting used to scratching and smudging the iPhone with this Flash based iPhone Simulator
The Box Office
The Box Office
Automatically wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.
My Foxification (Pimp Your Firefox to be a web all-star)
My Foxification
Pimp Your Firefox to be a web all-star
The PHP Willow Tree
The PHP Willow Tree
A look at the inc.common.php, spreading handy functions.
My Photoshop Scripting
My Photoshop Scripting
Photoshop Script inspired in the Chlomoscript to unobtrusively pimp photos you have taken.
My TinyMCE File Management
Methods to adding file management options to TinyMCE (Part 1), Extending TinyFCK (Part 2) and PHP file uploads overview (Spinoff 1).