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

Cannot style any children of .urlbarView.megabar in userChrome.css in Firefox 75

  • 5 replies
  • 1 has this problem
  • 19 views
  • Last reply by Alec Mev

more options

My userChrome.css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
.tab-line { display: none !important }
.urlbarView-body-inner { border-top: unset !important }
#urlbar-results { background: red !important }

The ".tab-line" rule is applied, the ".urlbarView-body-inner" and "#urlbar-results" rules aren't. Can anybody reproduce? What's wrong?

My userChrome.css: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); .tab-line { display: none !important } .urlbarView-body-inner { border-top: unset !important } #urlbar-results { background: red !important } The ".tab-line" rule is applied, the ".urlbarView-body-inner" and "#urlbar-results" rules aren't. Can anybody reproduce? What's wrong?

Modified by Alec Mev

Chosen solution

The Browser Toolbox shows that these element are inthe HTML namespace and thus need to be placed above the @namespace line.

.urlbarView-results {background: red !important;}

.urlbarView.megabar .urlbarView-body-inner {border-top: unset !important;}
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

Read this answer in context 👍 1

All Replies (5)

more options

You are looking for the urlbarView-row class items.

more options

I want to get rid of the 1px border at the top of the megabar. It's styled like so in browser.css:

.urlbarView.megabar .urlbarView-body-inner {
    width: 100%;
    border-top: 1px solid var(--urlbar-separator-color);
}

I'm trying to cancel out border-top by adding this to userChrome.css:

.urlbarView-body-inner {
    border-top: unset !important;
}

But there's no effect, the rule isn't even listed in the Rules of ".urlbarView-body-inner" in Browser Toolbox.

Modified by Alec Mev

more options

Chosen Solution

The Browser Toolbox shows that these element are inthe HTML namespace and thus need to be placed above the @namespace line.

.urlbarView-results {background: red !important;}

.urlbarView.megabar .urlbarView-body-inner {border-top: unset !important;}
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

more options

Either one of the following CSS codes work for me:

.urlbarView-body-inner {
    border-top: unset !important;
}

or

.urlbarView-body-inner {
    border-top: none !important;
}

Is this your first time working with userChrome.css modifications? Maybe you need to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true in the about:config page so that Firefox reads the CSS file. See Firefox Changes Breaking userChrome.css for more information.

more options

Thanks, cor-el! That was it.

Done some more googling, and looks like @-moz-document should be used instead of @namespace for scoping, to avoid silly issues like this.