为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

Change URL border color when focused

  • 13 个回答
  • 0 人有此问题
  • 1 次查看
  • 最后回复者为 Slouch

more options

Hi All,

I would like to change the url border color when it has the focus to blue.

The code below works, except when you press Escape.

After hitting Escape, the urlbar still has the focus but its border changes back to gray. It should remain blue.

I would also like to remove the box-shadow after pressing Escape, when the urlbar is not expanded (to mimic the behavior of FF 88).

The url and search input fields also do the same goofy thing Windows 10 does - the cursor stops blinking after 5 blinks and remains frozen. Any way to remove that behavior and keep the cursor blinking? If not, no big deal, the other stuff above is more important.

Any code suggestions to get that behavior are welcome!

/* set the initial borders of the urlbar and search bar to gray */
#urlbar > #urlbar-background, #urlbar[breakout][breakout-extend] > #urlbar-background, #searchbar { border: 1px solid #a1a6b5 !important; outline: none !important; border-radius: 0px !important; }
/* set urlbar border to blue when focused */
#urlbar[breakout][breakout-extend] #urlbar-background {
   border-color: #0078d7 !important;
}
Hi All, I would like to change the url border color when it has the focus to blue. The code below works, except when you press Escape. After hitting Escape, the urlbar still has the focus but its border changes back to gray. It should remain blue. I would also like to remove the box-shadow after pressing Escape, when the urlbar is not expanded (to mimic the behavior of FF 88). The url and search input fields also do the same goofy thing Windows 10 does - the cursor stops blinking after 5 blinks and remains frozen. Any way to remove that behavior and keep the cursor blinking? If not, no big deal, the other stuff above is more important. Any code suggestions to get that behavior are welcome! /* set the initial borders of the urlbar and search bar to gray */ #urlbar > #urlbar-background, #urlbar[breakout][breakout-extend] > #urlbar-background, #searchbar { border: 1px solid #a1a6b5 !important; outline: none !important; border-radius: 0px !important; } /* set urlbar border to blue when focused */ #urlbar[breakout][breakout-extend] #urlbar-background { border-color: #0078d7 !important; }
已附加屏幕截图

由Slouch于修改

被采纳的解决方案

When I compare screenshots with the drop-down open and closed, the most noticeable difference is when it is open, there is this extra attribute:

suppress-focus-border

When you press Esc, that is removed. This is why cor-el's previous discovery was relevant -- it's the rule for when that attribute is missing. https://searchfox.org/mozilla-release/source/browser/themes/shared/urlbar-searchbar.css#86

#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
#searchbar:focus-within {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-inset);
  /* We used --focus-outline above to inherit its width and style properties,
     but we still want to use the theme's border-color.
     --toolbar-field-focus-border-color is set equal to --focus-outline-color
     on :root, but LWT themes can override this value. */
  outline-color: var(--toolbar-field-focus-border-color);
  border-color: transparent;
}

So if you copy the exact rule and then turn off outline, that should work:

#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
#searchbar:focus-within {
  outline: none !important;
}

Edit: added screenshots

定位到答案原位置 👍 0

所有回复 (13)

more options

So the code is more readable (no horizontal scrolling), you can separate the selectors onto their own lines:

/* set the initial borders of the urlbar and search bar to gray */
#urlbar > #urlbar-background, 
#urlbar[breakout][breakout-extend] > #urlbar-background, 
#searchbar { 
    border: 1px solid #a1a6b5 !important; 
    outline: none !important; 
    border-radius: 0px !important; 
}
/* set urlbar border to blue when focused */
#urlbar[breakout][breakout-extend] #urlbar-background {
    border-color: #0078d7 !important;
}

It's possible that [breakout-extend] refers to the drop-down being open. Are you using the Browser Toolbox to inspect the address bar as you interact with it? https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html

有帮助吗?

more options

When I click inside the address bar to focus it, the toolbox gets deactivated, so I can't see the name of the active element.

有帮助吗?

more options

Probably the active element is id="urlbar". What's critical is to observe the attributes and class name(s) of the element. Can you tile the browser window to one side of the screen and the Browser Toolbox to the other side to make it easier to observe?

有帮助吗?

more options

有帮助吗?

more options

Hi cor-el,

Yes I saw that post. Even if it's an outline I'm not sure how to code what I want to achieve.

有帮助吗?

more options

Hi cor-el,

Yes I saw that post. Even if it's an outline I'm not sure how to code what I want to achieve.

有帮助吗?

more options

Hi jscher2000,

Even with tiling them if I click anywhere the toolbox becomes deactivated. The little blue arrow button in the toolbox turns black.

The closest I can come is the screen capture below (it shows urlbar-container).

有帮助吗?

more options

The section with the gray border/outline and the shadow may be urlbar-input-container as shown in the below screenshot.

有帮助吗?

more options

选择的解决方案

When I compare screenshots with the drop-down open and closed, the most noticeable difference is when it is open, there is this extra attribute:

suppress-focus-border

When you press Esc, that is removed. This is why cor-el's previous discovery was relevant -- it's the rule for when that attribute is missing. https://searchfox.org/mozilla-release/source/browser/themes/shared/urlbar-searchbar.css#86

#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
#searchbar:focus-within {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-inset);
  /* We used --focus-outline above to inherit its width and style properties,
     but we still want to use the theme's border-color.
     --toolbar-field-focus-border-color is set equal to --focus-outline-color
     on :root, but LWT themes can override this value. */
  outline-color: var(--toolbar-field-focus-border-color);
  border-color: transparent;
}

So if you copy the exact rule and then turn off outline, that should work:

#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
#searchbar:focus-within {
  outline: none !important;
}

Edit: added screenshots

由jscher2000 - Support Volunteer于修改

有帮助吗?

more options

Same result with that line. When pressing Esc, the border/outline turns back to gray and the box-shadow remains.

See the animation below from FF 88. I click in the URL bar, the outline turns blue. I type something and then press Escape. The URL bar shrinks, and the blue border remains, with no shadow around it. I click off the URL bar so it loses focus, and only then does its border/outline turn back to gray. That's what I'm trying to replicate.

由Slouch于修改

有帮助吗?

more options

In FF 88, I think this line look away the shadow when the urlbar was not expanded, but it's not working in FF 115 ESR.

#urlbar[breakout][breakout-extend]:not([open]) > #urlbar-background {
   box-shadow: none !important;
}

有帮助吗?

more options

Sorry, I forgot you were on 115. I'm on 125 now.

有帮助吗?

more options

I'm testing on multiple machines, so I keep switching between 115 and 125.

有帮助吗?

我要提问

您需要登录才能回复。如果您还没账号,可以提出新问题