為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

Bring back native focus outline for URL bar with userChrome.css on OS X

  • 2 回覆
  • 1 有這個問題
  • 3 次檢視
  • 最近回覆由 avenged110

more options

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.

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.
附加的畫面擷圖

被選擇的解決方法

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;
}


從原來的回覆中察看解決方案 👍 0

所有回覆 (2)

more options

選擇的解決方法

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;
}


由 cor-el 於 修改

more options

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.