Bring back native focus outline for URL bar with userChrome.css on OS X
Hi, I figured if anyone knew how to accomplish this, someone here would, because I'm at a loss.
I'm looking to use userChrome.css customizations to bring back the native focus outline (the blue glow) around the URL bar when it's in focus. I feel like this should definitely be possible in one way or another.
This is how my URL bar looks currently: image 1 below (or: https://imgur.com/IQDXejh) This is the "glow" to which I'm referring, which is native to OS X: image 2 below (or: https://imgur.com/ImA6Of8) For the record, I was only able to achieve that second example by using ":root #urlbar {-moz-appearance: textfield;}" which is obviously out of the question and only to illustrate the outline I'm seeking to add to URL bar in the first example.
Put another way, I just want my URL bar to use the native OS X outline glow when in focus (instead of my current 2px border) without changing any other styling, custom or otherwise (as much as possible).
I'm using 78.2.0esr on OS X 10.9.5 and the full contents of my userChrome.css file are: https://pastebin.com/QFsxdaF5 Thank you in advance for any help. Please let me know if I missed something important or can provide anymore information.
Chosen solution
That would be something like this in userChrome.css. Make sure to add the "!important" flag to override existing rules and you may have to define your own color. This rule copied from Firefox 68 works for the urlbar and the search bar.
#urlbar:not(.hidden-focus)[focused="true"],
.searchbar-textbox[focused="true"] {
border-color: var(--toolbar-field-focus-border-color) !important;
}- https://developer.mozilla.org/en-US/Tools/Browser_Toolbox
- https://searchfox.org/mozilla-release/source/browser/themes/shared/urlbar-searchbar.inc.css
All Replies (2)
Chosen Solution
That would be something like this in userChrome.css. Make sure to add the "!important" flag to override existing rules and you may have to define your own color. This rule copied from Firefox 68 works for the urlbar and the search bar.
#urlbar:not(.hidden-focus)[focused="true"],
.searchbar-textbox[focused="true"] {
border-color: var(--toolbar-field-focus-border-color) !important;
}Modified by cor-el
Thank you for the reply. I still believe that the problem is something in Firefox is overriding or blocking OS X from applying its own native (glow) styling to the type of text-entry field used by the URL bar. As I alluded to above, changing the URL bar to a "textfield" element bypasses this and results in the proper focus outline being applied. Unfortunately, it...bypasses all styling since the element is different, which is what I'm trying to avoid. I am relatively confident there should be a way to style a text entry field (like whatever type the URL bar is) while leaving the operating system's own focus style unmolested, but I'm certainly no expert in CSS.
All that said, your comment tipped me off to go looking in the past, so I explored some much older versions of FF when Mozilla was still trying to ape the native look as much as possible. From these values, I was able to achieve a near-perfect recreation seen in the screenshot below. While I'll always prefer the native focus outline, I'm marking this as solved because this is probably as good as it's ever going to get and I can live with that. Thanks for the tip.
