在元素间切换时可以更明显地判断哪个元素处于焦点状态

在元素间切换时可以更明显地判断哪个元素处于焦点状态

在 Firefox 中,当元素获得焦点时,元素周围会出现虚线边框。我发现有时根本看不到。我们可以使用哪些 Firefox 设置(如果有的话)来使焦点更加明显。

请注意,我想通过 Firefox 设置来执行此操作,而不是通过编辑网站的 CSS。

例如,在 SuperUser 中,当问题、标签、用户、徽章或未回答按钮处于焦点时,虚线边框完全不可见。我怎样才能使边框变成粉红色或红色,宽度为 5px?

目前,“问题”链接处于焦点位置。从网站的配色方案无法判断它是否处于焦点位置。

您是否相信问题链接已成为焦点。

通过改变一些 Firefox 设置,我宁愿它在聚焦时看起来像这样。

在此处输入图片描述

答案1

您可以通过将样式添加到以下位置来定义自己的默认样式:<Firefox 配置文件目录>\chrome\usercontent.css。您所做的任何更改都将在下次启动配置文件时生效(因此,如果您在编辑该文件时正在使用它,则必须重新启动)。

将以下内容添加到我的个人资料中用户内容.css

:focus {
  outline: #FF5500 dashed 2px;
}

我得到以下信息:


在此处输入图片描述


几点说明:

  • 用户内容.css仅定义在网页中未定义冲突样式时使用的默认样式。因此,这适用于焦点轮廓因偶然原因而被隐藏的情况(例如使用按钮图像,如本页所示),但它将不是如果网站作者特意定义了一个 CSS 样式来禁用焦点轮廓,无论是针对特定元素还是整个网页,这种方法都是可行的。人们普遍认为,禁用焦点轮廓而不定义区分焦点元素的替代方法是一种不好的做法,但不幸的是,这种做法太常见了。

  • 如果你没有看到铬合金配置文件目录中的子目录和/或您没有看到用户内容.css该子目录中的文件,只需创建它们即可。

  • about:support您可以通过在地址栏中输入(或选择故障排除信息来自帮助菜单),然后Show Folder点击应用程序基础知识部分。

答案2

你可以使用时髦的设置不同的焦点样式。例如:

:focus {
    outline: 3px solid red;
}

结果如下:

在此处输入图片描述

相关内容