r/FirefoxCSS • • 8h ago

Solved How do I target the [focused] state of the URL-Bar properly?

2 Upvotes

I'm using 153.5.0 ESR and I changed the border-radius of the URL-Bar to 5px with:

.urlbar-input-container {
  border-radius: 5px !important;
}

and that worked, however the blue glow when the URL-Bar is selected still has the default border radius making it look wrong.

I tried to do this:

.urlbar-input-container[focused] {
  border-radius: 5px !important;
}

but it didn't work. How do you properly target focused state in the Inspector? When I click something in the UI while the inspector is active the code jumps around and I can't seem to properly use the Element Selector Tool on items that have an active or focused state. Is there a trick to that?

Thanks for help in advance!


r/FirefoxCSS • • 14h ago

Solved 153.5.0 ESR, URL-bar doesn't seem to accept any properties but "background", how do I style it now?

2 Upvotes

I've run into another issue with my new ESR version, other than "background" and "border-radius" none of the properties I try to attach to .urlbar-input-container seems to do anything.

.urlbar-input-container {
  border-radius: 5px !important;
  background: RGBA(255,255,255,0.8) !important;
  outline: 10px !important;
  outline-color: black !important;
  outline-width: 10px !important;
  box-shadow: 10px !important;
} 

I know the values are high, I just set them so high so I can immediately see if they have an effect. I also tried .urlbar-container, #urlbar-container and #urlbar-container.urlbar-container as these are designators I found in the Inspector but nothing.

All I'm trying to do is to give the URL Bar a shadow and an outline.

Thanks for help in advance!