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.

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

how do i blank the searchbar when no text is entered

  • 4 ŋuɖoɖowo
  • 1 masɔmasɔ sia le esi
  • 2 views
  • Nuɖoɖo mlɔetɔ OneMoreName

more options

I want the searchbar to be blank when no text is entered. I was able to do this through CSS or through editing of the firefox browser jar on earlier releases, but cannot see how do do this on Firefox 10.

On early releases of firefox I could use userchrome.css as follows:

/* Hide the search engine name in the empty search box*/

  1. searchbar .searchbar-textbox[empty] .textbox-input-box { color: transparent !important; }

On later releases I could modify search.xml (part of browser.jar) where there is a method "updateDisplay" dealing with the list of search engines. It contained a line 'this._textbox.emptyText = name;' and this could be edited to read 'this._textbox.emptyText = "";'.

Both methods (in their respective releases) would cause the redundant search engine name to disappear from the empty search box (redundant because there is already an icon, and I am not setting up multiple searches on a single site).

How do I do this in Firefox 10?

Thanks.

I want the searchbar to be blank when no text is entered. I was able to do this through CSS or through editing of the firefox browser jar on earlier releases, but cannot see how do do this on Firefox 10. On early releases of firefox I could use userchrome.css as follows: /* Hide the search engine name in the empty search box*/ #searchbar .searchbar-textbox[empty] .textbox-input-box { color: transparent !important; } On later releases I could modify search.xml (part of browser.jar) where there is a method "updateDisplay" dealing with the list of search engines. It contained a line 'this._textbox.emptyText = name;' and this could be edited to read 'this._textbox.emptyText = "";'. Both methods (in their respective releases) would cause the redundant search engine name to disappear from the empty search box (redundant because there is already an icon, and I am not setting up multiple searches on a single site). How do I do this in Firefox 10? Thanks.

All Replies (4)

more options

I use this code in userChrome.css to set the font-size to 0.

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

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


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

#search-container .textbox-input-box { font-size:0px!important; }
#search-container .searchbar-textbox:hover .textbox-input-box,
#search-container .searchbar-textbox[focused="true"] .textbox-input-box { font-size:12pt!important; }
more options

That does not do what I want, really, because the search name shows up when my mouse rolls over the searchbox and because the text I actually type into the searchbar disappears when my mouse moves away.

However, somewere on the net within the past 24 hours I came across this


*|*.textbox-input:-moz-placeholder
 {
   -moz-appearance: none !important;
   color: transparent !important;
   text-shadow: none !important;
 }

which does work. I just wish I could find a way to restrict it to the searchbar's textbox (purely for the sake of cleanliness); as it stands it applies everywhere. But no matter what I try for qualifications other than the universal I can not get it to work. (I don't know css at all -- am just trying things that have the same pattern as stuff I know does work -- and so this is not surprising.)

more options

You can still make the placeholder appear on hover.

*|*.textbox-input:-moz-placeholder:hover { color: graytext!important; }
more options

I want the placeholder never to appear, and the code I found and posted above accomplishes this nicely. All I wish is that I could clearly restrict the code to the searchbar, and only the searchbar, since that is all I really want to change. I don't know of any other textbox-input elements on my windows, and I never noticed any other placeholders showing up and annoying me, but there might be other textbox-input items floating around, and I'd prefer to leave them intact, unchanged, until I've seen them. Then I could decide whether or not, if they had a visible placeholder, I wanted to see the placeholder.

But the code above works well for me. The placeholder is gone, and never shows up. Bravo.