fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2024-02-02
  • 发帖数172
  • 经验169枚
  • 威望0点
  • 贡献值182点
  • 好评度9点
  • 社区居民
  • 忠实会员
阅读:1454回复:11

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

楼主#
更多 发布于: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]) > #urlbar-background {
  box-shadow  : none !important;
  background  : none !important;
}
*/
   
/*===地址栏样式2===*/
#nav-bar { background  : none !important; }
#urlbar * { box-shadow: none !important; }
#urlbar:not([open])   > #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; }
}
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2023-10-31
  • 发帖数2765
  • 经验576枚
  • 威望1点
  • 贡献值128点
  • 好评度98点
  • 社区居民
  • 最爱沙发
  • 忠实会员
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; }
}
fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2024-02-02
  • 发帖数172
  • 经验169枚
  • 威望0点
  • 贡献值182点
  • 好评度9点
  • 社区居民
  • 忠实会员
2楼#
发布于:2023-06-05 10:54
alanfly:66行加两个规则。
#urlbar-background {
    outline: var(--focus-outline) !important;
    outline-offset: var(--focus-outline...
回到原帖
谢谢大佬!焦点框解决了。
但是出现一个问题,添加那两行代码,后面第73行的下拉列表背景颜色就失效了,这个有办法吗?主要是不喜欢刺眼的全白色。
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2023-10-31
  • 发帖数2765
  • 经验576枚
  • 威望1点
  • 贡献值128点
  • 好评度98点
  • 社区居民
  • 最爱沙发
  • 忠实会员
3楼#
发布于:2023-06-05 14:25
fire/fox:谢谢大佬!焦点框解决了。
但是出现一个问题,添加那两行代码,后面第73行的下拉列表背景颜色就失效了,这个有办法吗?主要是不喜欢刺眼的全白色。
回到原帖
抱歉,复制代码时多带了一个大括号影响了下面的代码,把1楼第5行的括号删掉就没事了。
fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2024-02-02
  • 发帖数172
  • 经验169枚
  • 威望0点
  • 贡献值182点
  • 好评度9点
  • 社区居民
  • 忠实会员
4楼#
发布于:2023-06-05 16:57
alanfly:抱歉,复制代码时多带了一个大括号影响了下面的代码,把1楼第5行的括号删掉就没事了。回到原帖
这下好了,谢谢!
fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2024-02-02
  • 发帖数172
  • 经验169枚
  • 威望0点
  • 贡献值182点
  • 好评度9点
  • 社区居民
  • 忠实会员
5楼#
发布于:2023-06-06 09:15
删除
/*地址栏下拉列表*/
里面的这一行:
width: 100% !important;
效果完美。
fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2024-02-02
  • 发帖数172
  • 经验169枚
  • 威望0点
  • 贡献值182点
  • 好评度9点
  • 社区居民
  • 忠实会员
6楼#
发布于:2023-10-29 17:17
alanfly:66行加两个规则。
#urlbar-background {
    outline: var(--focus-outline) !important;
    outline-offset: var(--focus-outline...
回到原帖
大佬,119更新后就失效了,能帮我看一下吗?谢谢!
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2023-10-31
  • 发帖数2765
  • 经验576枚
  • 威望1点
  • 贡献值128点
  • 好评度98点
  • 社区居民
  • 最爱沙发
  • 忠实会员
7楼#
发布于:2023-10-30 17:42
fire/fox:大佬,119更新后就失效了,能帮我看一下吗?谢谢!回到原帖
我在119下试了下上面的代码还是有效的,紫色高亮边框还在。是不是你最近有其他的css改动或是系统差异导致的,如果userchrome有变动贴出当前的代码以便分析。
fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2024-02-02
  • 发帖数172
  • 经验169枚
  • 威望0点
  • 贡献值182点
  • 好评度9点
  • 社区居民
  • 忠实会员
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]) > #urlbar-background {
  box-shadow  : none !important;
  background  : none !important;
}*/
 
 
/*===地址栏样式2===*/
#nav-bar { background  : none !important; }
#urlbar * { box-shadow: none !important; }
#urlbar:not([open])   > #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; }
}
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2023-10-31
  • 发帖数2765
  • 经验576枚
  • 威望1点
  • 贡献值128点
  • 好评度98点
  • 社区居民
  • 最爱沙发
  • 忠实会员
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;
}
fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2024-02-02
  • 发帖数172
  • 经验169枚
  • 威望0点
  • 贡献值182点
  • 好评度9点
  • 社区居民
  • 忠实会员
10楼#
发布于:2023-10-31 15:42
alanfly:看来是--focus-outline在你那边失效了导致outline被清除了,放弃引用应该就可以了。
把8楼代码里66-70行换成下面的代码。
#urlbar-background {
    outline: 2px solid A...
回到原帖
完美!
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大大!
游客

返回顶部