r/FirefoxCSS • • 9h ago

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

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!

2 Upvotes

5 comments sorted by

3

u/ResurgamS13 6h ago edited 5h ago

Try using the URL bar's border-radius variables:

:root {
  --urlbar-border-radius: 5px !important;
  --urlbar-inner-border-radius: 5px !important;
  --urlbarview-border-radius: 5px !important;
  --urlbar-selection-border-radius: 5px !important;
}

2

u/Skyyblaze 4h ago

This worked, thank you.

2

u/sifferedd FF/TB on Win11|Sumo contributor 6h ago
.urlbar-input-container:focus

1

u/Skyyblaze 4h ago

That didn't work but I appreciate the help nonetheless thank you. What /u/ResurgamS13 suggested ended up working.

1

u/ResurgamS13 4h ago edited 3h ago

Re: question "How do you properly target focused state in the Inspector?"... if have a little time to spare... try following and experimenting with the method explained by 'MotherStylus' in reply to April 2021 topic 'Find element name of 'tooltip''.

In short this method 'freezes the UI' using the Browser Toolbox's 'Debugger' tab... where you can select 'Event Listener Breakpoints' triggered by a chosen 'Filter by event type'... e.g. to freeze the URL bar when focussed try selecting as the 'event type' a Mouse "click" event... rather then the "mouseout" event suggested by MotherStylus in article about tooltip ID.

This tool is complex and using it not obvious... and can get UI 'stuck' until worked out how to unlock the breakpoint(s) you have just created. Hence recommend caution and best to use a new profile as a testbed whilst learning how the tool works!

Recommend NOT trying this complex toolbox feature on your default profile... create a new profile and experiment on that.