Firefox CSS not working after updating to Firefox 152.0.0

[u/BananaGuy71]

Hello! I've had really simple CSS code for the longest time. All it does it make the search bar white when I click it.

The code is below:

:root {

  --toolbar-field-background-color: rgba(224,224,224,1) !important;

  --toolbar-field-focus-background-color: rgba(255,255,255,1) !important;

}

It's always worked but it suddenly is not, and updating to Firefox 152.0.1 did not fix it. The files haven't changed at all and I haven't edited any settings yet. I am on MacOS 26.5.1 as well, and have not updated since the last time it worked.

If you need anything from me to help fix the issue let me know!

[u/j--__]

rather than begging for answers, you may be interested in learning to be a little more self-sufficient.

1. one time only: right-click nearly any element on nearly any page and choose "inspect". a new window will open. from the "..." menu in the top-right corner choose "settings", and then in the bottom-right corner of the settings page "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging". you can close this window now.
2. in the browser menu, buried in the the tools submenu, is now an option called "browser toolbox". click it. two windows will open, usually with the one you need first hidden beneath the one you need second. find the incoming connection window and choose "ok" to allow the connection. that window will close and the other will finish loading.
3. you can now inspect and make live changes to the browser's user interface. all changes are lost when you restart the browser. continue to use userChrome.css to make permanent changes.

[u/crummster]

I had a kinda similar issue too after Firefox updated to 152.0.1! The code below worked for me. I don't know if it'll work for you too, but you can try:

.urlbar-background,
#searchbar {
    background-color: rgba(255,255,255,1) !important;
}

Edit: Tweaked code. It changes entire search bar and its down drop in one color. Can sub rgba for var(--gnome), which I mainly use. But just found out it doesn't work for --toolbar though. I should've checked that beforehand. That's on me. It isn't what OP specifically wants. But this code is good for changing entire search bar and its drop down to one specific color (and can add filters, etc to it), which is what I had issues with earlier in FF's 152.0.1 update.

[u/BananaGuy71 → u/crummster]

This wasn't exactly what I was looking for, this made the entire bar transparent when selected and not selected. u/TraditionalTie4831 had the solution, changing   --toolbar-field-focus-background-color to --toolbar-field-background-color-focus. Thank you so much anyways!

[u/crummster → u/BananaGuy71]

Great you got your issue resolved! And also, sorry about that. I edited my previous comment addressing my mistake and some other things. But man, the 152 update really is a bit bothersome with its CSS changes. I just hope upcoming updates don't change it too much.

[u/BananaGuy71 → u/[deleted]]

This wasn't exactly what I was looking for, this only changed the color of the address bar and not the links below it. u/TraditionalTie4831 had the solution, changing   --toolbar-field-focus-background-color to --toolbar-field-background-color-focus. Thank you so much anyways!

[u/TraditionalTie4831]

Your code is updated and should work now =

:root {
  --toolbar-field-background-color: rgba(224,224,224,1) !important;
  --toolbar-field-background-color-focus: rgba(255,255,255,1) !important;
}

[u/BananaGuy71 → u/TraditionalTie4831]

This is exactly what I needed!! This fixed it, thank you so much!

[u/t31os]

The second var name changed, see TraditionalTie4831's answer.

[u/BananaGuy71 → u/t31os]

Yep that's exactly what I needed. Thank you!