We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

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

Wo archive tread sia. Meɖekuku bia biabia yeye ne ehia kpeɖeŋu.

Hide placeholder text only in certain text boxes

  • 2 ŋuɖoɖowo
  • 1 masɔmasɔ sia le esi
  • 1 view
  • Nuɖoɖo mlɔetɔ Quisquose

Quisquose
Quisquose
more options

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.

Ŋuɖoɖo si wotia

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.

Xle ŋuɖoɖo sia le goya me 👍 1

All Replies (2)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Ɖɔɖɔɖo si wotia

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.

Quisquose
Quisquose Biabia la
more options

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!