【已解决】地址栏的焦点框，能一直显示吗？

楼主^#

更多发布于：2023-06-04 09:38

如图：https://postimg.cc/XX7SwjW8

就是第 66 行的那个 outline-color 颜色框，想要它一直显示。

/*隐藏前进后退图标*/
#back-button { display: none !important }
#forward-button { display: none !important }
   
/*隐藏网站信息图标*/
#identity-box { display: none !important }
   
/*隐藏盾形图标*/
#tracking-protection-icon-container { display: none !important }
   
/*隐藏地址栏添加书签图标*/
#star-button-box{
  margin-inline: calc((16px + var(--urlbar-icon-padding) * 2) / -2) !important;
  opacity: 0;
  pointer-events: none;
}
   
/*隐藏标签栏左右空白*/
.titlebar-spacer { display: none !important; }
   
/*隐藏右键图标*/
#context-navigation,
#context-sep-navigation
{display: none !important;}
   
/*书签图标*/
#bookmarks-menu-button {
  /*list-style-image: url("chrome://browser/skin/bookmark-hollow.svg")!important;*/
  list-style-image: url("chrome://global/skin/icons/arrow-down.svg")!important;
  /*list-style-image: url("chrome://global/skin/icons/resizer.svg")!important;*/
}
   
/*扩展图标*/
#unified-extensions-button{
 list-style-image: url("chrome://global/skin/icons/chevron.svg")!important;
 } 
   
/*窗口按钮间隔*/
.titlebar-button{ margin-inline: -5px !important; }
   
/*标题栏高度*/
:root {
  --tab-block-margin: 4px 4px !important;
}
#tabbrowser-arrowscrollbox {
  --tab-min-height: 40px !important;
  max-height: var(--tab-min-height);
}
.tabbrowser-tab {
  min-height: 24px !important;
}
   
/*===地址栏样式1===
#nav-bar { background  : none !important; }
#urlbar-background { outline:none !important; }
#urlbar:not(:hover):not([breakout][breakout-extend]) &gt; #urlbar-background {
  box-shadow  : none !important;
  background  : none !important;
}
*/
   
/*===地址栏样式2===*/
#nav-bar { background  : none !important; }
#urlbar * { box-shadow: none !important; }
#urlbar:not([open])   &gt; #urlbar-background { background: none !important; }
#urlbar-background { outline-color: #786FA6 !important; }
   
/*地址栏下拉列表*/
#urlbar[breakout][breakout-extend] {
  width: 100% !important;
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
  --toolbar-field-focus-background-color: #DBDEDE !important;
}
   
/*地址栏标签栏同列*/
#urlbar-container { width: auto !important; }
 :root {  
    --uc-urlbar-width: clamp(200px, 240px, 300px);
}
@media (min-width: 500px) { 
    #TabsToolbar { margin-left: var(--uc-urlbar-width) !important; }
    #nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 8px) calc(100vw - var(--uc-urlbar-width)) 0 0 !important; }
}

喜欢1

最新喜欢：

点球射飞

alanfly 千年狐狸 UID31035 注册日期2009-11-10 最后登录2025-04-23 发帖数2783 经验595枚威望1点贡献值132点好评度108点加关注写私信	1楼^# 发布于：2023-06-04 17:44 66行加两个规则。 #urlbar-background { outline: var(--focus-outline) !important; outline-offset: var(--focus-outline-inset) !important; outline-color: #786FA6 !important; } }
	回复(2) 喜欢(1)

fire/fox 火狐狸 UID32624 注册日期2010-04-21 最后登录2025-08-07 发帖数184 经验182枚威望0点贡献值194点好评度11点加关注写私信	2楼^# 发布于：2023-06-05 10:54 alanfly：66行加两个规则。 #urlbar-background { outline: var(--focus-outline) !important; outline-offset: var(--focus-outline...回到原帖谢谢大佬！焦点框解决了。但是出现一个问题，添加那两行代码，后面第73行的下拉列表背景颜色就失效了，这个有办法吗？主要是不喜欢刺眼的全白色。
	回复(1) 喜欢(0)

alanfly 千年狐狸 UID31035 注册日期2009-11-10 最后登录2025-04-23 发帖数2783 经验595枚威望1点贡献值132点好评度108点加关注写私信	3楼^# 发布于：2023-06-05 14:25 fire/fox：谢谢大佬！焦点框解决了。但是出现一个问题，添加那两行代码，后面第73行的下拉列表背景颜色就失效了，这个有办法吗？主要是不喜欢刺眼的全白色。回到原帖抱歉，复制代码时多带了一个大括号影响了下面的代码，把1楼第5行的括号删掉就没事了。
	回复(1) 喜欢(1)

fire/fox 火狐狸 UID32624 注册日期2010-04-21 最后登录2025-08-07 发帖数184 经验182枚威望0点贡献值194点好评度11点加关注写私信	4楼^# 发布于：2023-06-05 16:57 alanfly：抱歉，复制代码时多带了一个大括号影响了下面的代码，把1楼第5行的括号删掉就没事了。回到原帖这下好了，谢谢！
	回复(0) 喜欢(0)

fire/fox 火狐狸 UID32624 注册日期2010-04-21 最后登录2025-08-07 发帖数184 经验182枚威望0点贡献值194点好评度11点加关注写私信	5楼^# 发布于：2023-06-06 09:15 删除 /地址栏下拉列表/ 里面的这一行： width: 100% !important; 效果完美。
	回复(0) 喜欢(0)

fire/fox 火狐狸 UID32624 注册日期2010-04-21 最后登录2025-08-07 发帖数184 经验182枚威望0点贡献值194点好评度11点加关注写私信	6楼^# 发布于：2023-10-29 17:17 alanfly：66行加两个规则。 #urlbar-background { outline: var(--focus-outline) !important; outline-offset: var(--focus-outline...回到原帖大佬，119更新后就失效了，能帮我看一下吗？谢谢！
	回复(1) 喜欢(0)

alanfly 千年狐狸 UID31035 注册日期2009-11-10 最后登录2025-04-23 发帖数2783 经验595枚威望1点贡献值132点好评度108点加关注写私信	7楼^# 发布于：2023-10-30 17:42 fire/fox：大佬，119更新后就失效了，能帮我看一下吗？谢谢！回到原帖我在119下试了下上面的代码还是有效的，紫色高亮边框还在。是不是你最近有其他的css改动或是系统差异导致的，如果userchrome有变动贴出当前的代码以便分析。
	回复(1) 喜欢(0)

fire/fox

火狐狸

UID32624
注册日期2010-04-21
最后登录2025-08-07
发帖数184
经验182枚
威望0点
贡献值194点
好评度11点

加关注写私信

8楼^#

发布于：2023-10-31 10:19

alanfly：我在119下试了下上面的代码还是有效的，紫色高亮边框还在。是不是你最近有其他的css改动或是系统差异导致的，如果userchrome有变动贴出当前的代码以便分析。回到原帖

css没有变动，去掉那两行代码，聚焦地址栏的时候有框，不聚焦的时候就没有框。
有那两行代码，聚不聚焦都不显示框框。
这是完整的userchrome：

/*隐藏前进后退图标*/
#back-button { display: none !important }
#forward-button { display: none !important }
 
/*隐藏网站信息图标*/
#identity-box { display: none !important }
 
/*隐藏盾形图标*/
#tracking-protection-icon-container { display: none !important }
 
/*隐藏地址栏添加书签图标*/
#star-button-box{
  margin-inline: calc((16px + var(--urlbar-icon-padding) * 2) / -2) !important;
  opacity: 0;
  pointer-events: none;
}
 
/*隐藏标签栏左右空白*/
.titlebar-spacer { display: none !important; }
 
/*隐藏右键图标*/
#context-navigation,
#context-sep-navigation
{display: none !important;}
 
/*书签图标*/
#bookmarks-menu-button {
  /*list-style-image: url("chrome://browser/skin/bookmark-hollow.svg")!important;*/
  list-style-image: url("chrome://global/skin/icons/arrow-down.svg")!important;
  /*list-style-image: url("chrome://global/skin/icons/resizer.svg")!important;*/
}
 
/*扩展图标*/
#unified-extensions-button{
 list-style-image: url("chrome://global/skin/icons/chevron.svg")!important;
 } 
 
/*窗口按钮间隔*/
.titlebar-button{ margin-inline: -5px !important; }
 
/*标题栏高度*/
:root {
  --tab-block-margin: 2px 6px !important;
}
/*#tabbrowser-arrowscrollbox {
  --tab-min-height: 40px !important;
  max-height: var(--tab-min-height);
}
.tabbrowser-tab {
  min-height: 24px !important;
}*/
 
/*===地址栏样式1===
#nav-bar { background  : none !important; }
#urlbar-background { outline:none !important; }
#urlbar:not(:hover):not([breakout][breakout-extend]) &gt; #urlbar-background {
  box-shadow  : none !important;
  background  : none !important;
}*/
 
 
/*===地址栏样式2===*/
#nav-bar { background  : none !important; }
#urlbar * { box-shadow: none !important; }
#urlbar:not([open])   &gt; #urlbar-background { background: none !important; }
#urlbar-background {
    outline: var(--focus-outline) !important;
    outline-offset: var(--focus-outline-inset) !important;
    outline-color: #786FA6 !important;
}
 
/*地址栏下拉列表*/
#urlbar[breakout][breakout-extend] {
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
  --toolbar-field-focus-background-color: #DBDEDE !important;
}
 
/*地址栏标签栏同列*/
#urlbar-container { width: auto !important; }
 :root {  
    --uc-urlbar-width: clamp(200px, 240px, 300px);
}
@media (min-width: 500px) { 
    #TabsToolbar { margin-left: var(--uc-urlbar-width) !important; }
    #nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 11px) calc(100vw - var(--uc-urlbar-width)) 0 0 !important; }
}

回复(1) 喜欢

alanfly

千年狐狸

UID31035
注册日期2009-11-10
最后登录2025-04-23
发帖数2783
经验595枚
威望1点
贡献值132点
好评度108点

加关注写私信

9楼^#

发布于：2023-10-31 11:58

fire/fox：css没有变动，去掉那两行代码，聚焦地址栏的时候有框，不聚焦的时候就没有框。
有那两行代码，聚不聚焦都不显示框框。
这是完整的userchrome：
/*隐藏前进后退图标*/
#back-button { display: none...回到原帖

看来是--focus-outline在你那边失效了导致outline被清除了，放弃引用应该就可以了。
把8楼代码里66-70行换成下面的代码。

#urlbar-background {
    outline: 2px solid AccentColor !important;
    outline-offset: -2px !important;
    outline-color: #786FA6 !important;
}

回复(2) 喜欢(1)

fire/fox 火狐狸 UID32624 注册日期2010-04-21 最后登录2025-08-07 发帖数184 经验182枚威望0点贡献值194点好评度11点加关注写私信	10楼^# 发布于：2023-10-31 15:42 alanfly：看来是--focus-outline在你那边失效了导致outline被清除了，放弃引用应该就可以了。把8楼代码里66-70行换成下面的代码。 #urlbar-background { outline: 2px solid A...回到原帖完美！
	回复(0) 喜欢(0)

sicifus 小狐狸 UID31665 注册日期2010-01-19 最后登录2023-12-24 发帖数25 经验32枚威望0点贡献值0点好评度0点加关注写私信	11楼^# 发布于：2023-12-08 10:56 alanfly：看来是--focus-outline在你那边失效了导致outline被清除了，放弃引用应该就可以了。把8楼代码里66-70行换成下面的代码。 #urlbar-background { outline: 2px solid A...回到原帖搜索到这个贴子，解决了同样的诉求，感谢alanfly大大！
	回复(0) 喜欢(0)

您需要登录后才可以回帖，登录或者注册