Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Removal of location bar placeholder text reversed by upgrade to 21.0

  • 4 پاسخ
  • 6 have this problem
  • 2 views
  • آخرین پاسخ توسّط cor-el

more options

I followed the instructions at https://support.mozilla.org/en-US/questions/931278 for removing the annoying "Go to a Web site" text from the location bar, and it worked well - in version 18.0. Upon upgrade to 21.0, the location bar displays placeholder text again. Now it's "Search or enter address." The customized userChrome.css is still where it formerly was, but version 21.0 seems to ignore it.

How can I remove this text in version 21.0?

I followed the instructions at https://support.mozilla.org/en-US/questions/931278 for removing the annoying "Go to a Web site" text from the location bar, and it worked well - in version 18.0. Upon upgrade to 21.0, the location bar displays placeholder text again. Now it's "Search or enter address." The customized userChrome.css is still where it formerly was, but version 21.0 seems to ignore it. How can I remove this text in version 21.0?

Chosen solution

You need to use the ::-moz-placeholder pseudo-element


Add code to the userChrome.css file below the default @namespace line.

The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

*|*.textbox-input::-moz-placeholder { color:transparent !important; }
*|*.textbox-input:hover::-moz-placeholder { color:black !important; }

The same for the demo site, this works with the Style editor.

input::-moz-placeholder {
 color: green;
}
    
input:hover::-moz-placeholder {
 color: red;
}
Read this answer in context 👍 1

All Replies (4)

more options

Hello,

The Reset Firefox feature can fix many issues by restoring Firefox to its factory default state while saving your essential information. Note: This will cause you to lose any Extensions, Open websites, and some Preferences.

To Reset Firefox do the following:

  1. Go to Firefox > Help > Troubleshooting Information.
  2. Click the "Reset Firefox" button.
  3. Firefox will close and reset. After Firefox is done, it will show a window with the information that is imported. Click Finish.
  4. Firefox will open with all factory defaults applied.

Further information can be found in the Refresh Firefox - reset add-ons and settings article.

Did this fix your problems? Please report back to us!

Thank you.

more options

Chosen Solution

You need to use the ::-moz-placeholder pseudo-element


Add code to the userChrome.css file below the default @namespace line.

The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

*|*.textbox-input::-moz-placeholder { color:transparent !important; }
*|*.textbox-input:hover::-moz-placeholder { color:black !important; }

The same for the demo site, this works with the Style editor.

input::-moz-placeholder {
 color: green;
}
    
input:hover::-moz-placeholder {
 color: red;
}

Modified by cor-el

more options

Thanks. At a glance the above looks exactly like the answer I linked to, which formerly worked and no longer does.

To clarify, what needs to change from my earlier config is that "textbox-input:-moz-placeholder" needs an additional colon inserted to make it "textbox-input::-moz-placeholder", and "hover" must move from after "-moz-placeholder" to before it.

I also changed "color: black" to "color: transparent" in the "hover" line, because I really do not want the placeholder text AT ALL. For it to pop up when my mouse pointer passes by is even worse than it being there continuously, because popping up creates visual motion that increases the original attention-theft problem. The fact that it looks like real text (which would have to be selected and removed to type into the field), but it isn't real text and can't be selected with the mouse, only makes it even more annoying. I'm frankly amazed that Mozilla, which presumably employs UI design experts, ever thought superfluous call-to-action text like this was a good idea. See http://www.nngroup.com/articles/information-pollution/ .

more options

I have updated that original answer and added the second colon (::-moz-placeholder; originally there was only one colon) as you can you if you look at the bottom of that reply in case others stumble across it.

Leave out the hover line if you do not want this behavior.