X
Tap here to go to the mobile version of the site.

Support Forum

Hide placeholder text only in certain text boxes

Posted

I would like to hide placeholder text in the URL Address bar and Search bar ONLY, and nowhere else.

I found the some CSS code that works, but it hides placeholder text in ALL text boxes, not just the URL and Web Search boxes.

How should I modify the code below to restrict it so that other textboxes (such as the Quick Find / FAYT) remains unaffected?

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

I'm guessing some IDs need to be added in place of the *|*, but I don't know the correct syntax to use.

I would like to hide placeholder text in the URL Address bar and Search bar ONLY, and nowhere else. I found the some CSS code that works, but it hides placeholder text in ALL text boxes, not just the URL and Web Search boxes. How should I modify the code below to restrict it so that other textboxes (such as the Quick Find / FAYT) remains unaffected? *|*.textbox-input::-moz-placeholder { color:transparent !important; } *|*.textbox-input:focus::-moz-placeholder { color:transparent !important; } I'm guessing some IDs need to be added in place of the *|*, but I don't know the correct syntax to use.

Chosen solution

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


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

#urlbar *|*.textbox-input::-moz-placeholder,
#urlbar *|*.textbox-input:focus::-moz-placeholder {color:transparent!important}

#searchbar *|*.textbox-input::-moz-placeholder,
#searchbar *|*.textbox-input:focus::-moz-placeholder {color:transparent!important}

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

Read this answer in context 1

Additional System Details

Installed Plug-ins

  • Shockwave Flash 10.3 r183
  • Symantec PKI Client - Browser Support
  • PDF-XChange Editor Netscape Gecko Plugin
  • Nitro PDF plugin for Firefox and Chrome

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2

More Information

cor-el
  • Top 10 Contributor
  • Moderator
17762 solutions 160641 answers

Chosen Solution

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


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

#urlbar *|*.textbox-input::-moz-placeholder,
#urlbar *|*.textbox-input:focus::-moz-placeholder {color:transparent!important}

#searchbar *|*.textbox-input::-moz-placeholder,
#searchbar *|*.textbox-input:focus::-moz-placeholder {color:transparent!important}

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

Add code to the <b>userChrome.css</b> file below the default @namespace line. *http://kb.mozillazine.org/userChrome.css ---- <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ #urlbar *|*.textbox-input::-moz-placeholder, #urlbar *|*.textbox-input:focus::-moz-placeholder {color:transparent!important} #searchbar *|*.textbox-input::-moz-placeholder, #searchbar *|*.textbox-input:focus::-moz-placeholder {color:transparent!important} </nowiki></pre> ---- The customization files userChrome.css (user interface) and userContent.css (websites) are located in the <b>chrome</b> folder in the Firefox profile folder. *http://kb.mozillazine.org/Editing_configuration

Question owner

Thank you SO much cor-el.

That works perfectly!

I now have a clean address and search bar, but without affecting the search text box that's in the middle of the Firefox default home page (where the placeholder text tells you which search engine is currently selected).

It also means that I can continue to distinguish my 'quick find' from my 'quick find links only' search bars. These look identical, and only the placeholder texts lets you figure out which one is which.

Thanks again!

Thank you '''SO''' much cor-el. That works perfectly! I now have a clean address and search bar, but without affecting the search text box that's in the middle of the Firefox default home page (where the placeholder text tells you which search engine is currently selected). It also means that I can continue to distinguish my 'quick find' from my 'quick find links only' search bars. These look identical, and only the placeholder texts lets you figure out which one is which. Thanks again!