Working around the Firefox 15 Placeholder display issue

Kenneth Christopher By Kenneth Christopher on Sep 13, 2012 in Security

If you just upgraded Firefox to version 15 you might have noticed the placeholder text for form fields doesn't work quite as it used to. By the way, the placeholder text is that bit of text that gives the user a clue as to what they are supposed to do with the text input field:

 

Previously in Firefox, when sites displayed "placeholder" text in a form field, it would vanish as soon as the user clicked or tabbed into the field. With Firefox 15, the placeholder text stays there until you type at least one character, and because the placeholder text is more like a background image than actual text, you can't edit, delete, or move past it.

If, like me, you have become accustomed to the placeholder text clearing as soon as you click into the field, this change could be quite annoying. You might just have to learn to live with this because it appears that it won't be changing back:

However, as Jefferson Scher explains in this thread, there is a workaround for this:
  1. Install the Stylish extension: https://addons.mozilla.org/firefox/addon/stylish/
  2. After restarting Firefox, click the Stylish "S" icon on the Add-on bar > Write new style > Blank Style

    P/s: If you do not usually display the Add-on bar, press Ctrl+/ to display it. If the "S" icon is not there, drag it from the Customize dialog, which you can show using Alt+v > Toolbars > Customize.
  3. In the editor, paste this:
    @namespace url(http://www.w3.org/1999/xhtml);
    *:-moz-placeholder:focus {
    color: transparent !important;
    }
    *[autofocus]:-moz-placeholder:focus {
    color: graytext !important;
    }
  4. Give it a name, and click Save.
 

If you are a front-end developer, you might want to include this in the stylesheet rules for form placeholders to make it generic. That's it. You should be good to go.

 

Know of a different workaround to this? Please feel free to share.

 

 

Comments

No comments yet.

Leave a comment

Comments are moderated. Your comment may appear after approval.