Removal of location bar placeholder text reversed by upgrade to 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?
الحل المُختار
You need to use the ::-moz-placeholder pseudo-element
- https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder
- https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-placeholder
- Bug 737786 - Switch from :-moz-placeholder to ::-moz-placeholder (pseudo-class to 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)
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:
- Go to Firefox > Help > Troubleshooting Information.
- Click the "Reset Firefox" button.
- Firefox will close and reset. After Firefox is done, it will show a window with the information that is imported. Click Finish.
- 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.
الحل المُختار
You need to use the ::-moz-placeholder pseudo-element
- https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder
- https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-placeholder
- Bug 737786 - Switch from :-moz-placeholder to ::-moz-placeholder (pseudo-class to 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
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/ .
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.