Firefox 143: Address bar now has gray background instead of white

[Nicholas-Steel]

Guidelines

• [x] I have read how to report a new issue
• [x] I have used the latest release
• [x] I have set the toolkit.legacyUserProfileCustomizations.stylesheets in about:config to true

Does the issue occur without any files inside /chrome/ folder?

No

Description of the Issue

I updated to FIrefox v143 from 142.0.1 and noticed the background of the Address Bar became gray, so I then downloaded the latest CustomCSSforFx package and updated my CSS and Image folders but the issue remains.

Issue description, userChrome.css/userContent.css 'settings' the issue occurs with and steps to reproduce the issue

chrome.zip

Does the issue occur with the most recent version of CustomCSSforFx (release/test/dev build)?

Yes, with the latest release

Screenshots showing the issue

System information

• OS & OS version: Windows 10 22H2
• DPI/HiDPI/scaling value, if not 100% (e.g. 125%, 150%...): "Make text bigger" is set to 120%
• Firefox version: 143
• Firefox theme (e.g. default, build in light/dark, external theme + link): System Theme (Auto) 1.4.2

[MarkRH]

Using the inspector I came up with this that seems to partly work:

/* Set the background color of the URL for fx143.  */
.urlbar-input-container {
	background-color: white !important;
} /**/

[Nicholas-Steel]

That worked, thank you!

But why do you say it only partially fixes it? What am I not noticing?

[Hobbix]

I’m using a custom theme, so the background inside the address bar has remained white. However, after updating to FF143, the border inside the address bar disappeared when it’s not focused. Could you please provide me with the CSS to bring the border back in the address bar?

[jack-ii]

@Hobbix This worked for me.

.urlbar-input-container{
border: 1px #b1b1b1 solid !important;
}

[Hobbix]

It turns out that in FF143 the file urlbar_restore_visible_border.css just broke. I found another solution here: https://github.com/Aris-t2/CustomCSSforFx/issues/775#issuecomment-3300207702 Including restoring the small rounded corners.

[p060477]

ff 143 is a really nightmare...see these bugs: https://github.com/Aris-t2/CustomCSSforFx/issues/777

[mozo78]

@Hobbix This worked for me.

.urlbar-input-container{
border: 1px #b1b1b1 solid !important;
}

Thank you for this!

[ChasCB]

Thank you

[deedub-hub]

While using the Browser Toolbox to inspect the urlbar in FFX143 I've discovered that what used to be #urlbar-background was changed to .urlbar-background. In other words it's now a class instead of an id. So to make the following 3 stylesheets work: urlbar_background_color.css urlbar_border_roundness.css urlbar_restore_visible_border.css simply edit every occurrance of #urlbar-background to become .urlbar-background. Of course, for backward compatibility you can also use :is(#urlbar-background,.urlbar-background)

[mozo78]

While using the Browser Toolbox to inspect the urlbar in FFX143 I've discovered that what used to be #urlbar-background was changed to .urlbar-background. In other words it's now a class instead of an id. So to make the following 3 stylesheets work: urlbar_background_color.css urlbar_border_roundness.css urlbar_restore_visible_border.css simply edit every occurrance of #urlbar-background to become .urlbar-background. Of course, for backward compatibility you can also use :is(#urlbar-background,.urlbar-background)

Yes, it's working :)

[glennpc]

Thanks for finding that @deedub-hub That's a great fix while we wait for @Aris-t2 to update the files.

[p060477]

we all anxiously wait for Aris-t2 to fix this issues....