搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

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

  • 5 回覆
  • 1 有這個問題
  • 47 次檢視
  • 最近回覆由 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?

由 Alec Mev 於 修改

被選擇的解決方法

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 */

從原來的回覆中察看解決方案 👍 1

所有回覆 (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.

由 Alec Mev 於 修改

more options

選擇的解決方法

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.