【问题标题】:What is -webkit-focus-ring-color?什么是-webkit-focus-ring-color?
【发布时间】:2011-11-24 05:22:20
【问题描述】:

我想将 webkit 中聚焦输入框的 outline 效果重现到非 webkit 浏览器。我发现here webkit 中使用的默认 CSS。感兴趣的行是:

:focus {
    outline: auto 5px -webkit-focus-ring-color
}

我尝试在整个代码中搜索定义-webkit-focus-ring-colorhere,但在任何地方都找不到。

【问题讨论】:

  • 嗯,“对焦环”是一个圆形渐变,据我所知无法在轮廓中定义。对我来说,它看起来更像是一个盒子阴影。这就是我个人使用box-shadow: 0 0 2px <color> 之类的方式重新创建效果的方式
  • 这也取决于用户的偏好。在 Mac 上,它将是蓝色或石墨色,而在 PC 上,它将是金黄色。
  • 使用 Chrome 开发者工具。强制元素的焦点状态和see for yourself

标签: css webkit


【解决方案1】:

-webkit-focus-ring-color 在 WebKit 代码库中定义为每个 RenderTheme 类中的 focusRingColor。这项工作于 2009 年 6 月作为 this changeset by Jeremy Moskovich 的一部分执行。

例如,默认的 Mac 主题(由 Safari 使用)将RenderThemeMac.mm 中的颜色(以迂回的方式)定义为:

[NSColor keyboardFocusIndicatorColor]

(Apple's very light documentation of that property is available online).

Mac 有一个覆盖值(称为WebCore::oldAquaFocusRingColor)用于测试(据我所知,这是为了让代码能够在浏览器渲染和参考图形之间进行比较;它是切换的使用WebCore::usesTestModeFocusRingColor)。它在ColorMac.mm 中定义如下(显然映射到Color(125, 173, 217)):

0xFF7DADD9

Chromium/Chrome 将RenderThemeChromiumSkia.cpp 中的颜色定义为:

Color(229, 151, 0, 255)

默认颜色(在RenderTheme.h中指定)是纯黑色:

Color(0, 0, 0)

【讨论】:

    【解决方案2】:

    编辑:正如@chharvey 所说,Highlight 现在是deprecated system color,,所以请忽略这个答案。


    -webkit-focus-ring-color 在 Firefox 中不起作用。您可以使用系统颜色Highlight 作为替代品。

    :focus {
        outline: auto 2px Highlight;
        outline: auto 5px -webkit-focus-ring-color;
    }
    

    另请参阅this 网站,了解为什么重置outline 样式通常是一个坏主意。

    【讨论】:

    • 谢谢,Bootstrap 默认重置outline 很烦人。我希望我可以简单地使用outline: inherit/initial 重新重置它。
    • 我同意 Bootstrap 重置它很烦人......这就是为什么我们必须尝试“取消”重置它以使其尽可能接近浏览器默认设置,因为一旦设置,您就无法取消重置。我也希望 initial/inherit 能奏效,但也没有。
    【解决方案3】:

    使用这个jsFiddle。我在 Windows 7 上的 Chrome 14 中获得了rgb(229, 151, 0)

    【讨论】:

    • 我在 Mac OS X 上的 Chrome 14 中获得了 rgb(94, 158, 214)。哈哈。
    • 嗯,是的,Mac 输入字段默认为蓝色。您可以将其更改为石墨。但在 Windows 上(我认为 Ubuntu 也是如此),大纲是黄金。我相信金色是 Webkit 的默认颜色,我认为 Mac 会覆盖它(但我可能对此不正确)。这是否回答你的问题? (顺便说一句,在 Mac OS 10.6 上的 Chrome 12 中,我得到了rgb(97, 157, 215)。)
    • 在 Mac 上,轮廓是渐变的,而其他的则不是。
    • rgb(59, 153, 252) 在当前版本中。
    【解决方案4】:

    以下代码试图找到最接近系统颜色的解决方案:

    *:focus {
        box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
        box-shadow: 0 0 0 3px activeborder; /* Blink, Chrome */ 
        box-shadow: 0 0 0 3px -moz-mac-focusring; /* Firefox */
        outline: auto 0 -webkit-focus-ring-color; /* Webkit, Safari */
    }
    

    【讨论】:

      【解决方案5】:

      FWIW: 在 Mac 上使用 Chrome,在使用普通浏览器模式时,我会得到蓝色的轮廓颜色。当我使用设备视图时,我得到一个黄色/金色的轮廓颜色。

      不确定它为什么会改变 - 实际上非常令人困惑。请参阅下面的示例。

      【讨论】:

      • 是的,没错。
      【解决方案6】:

      如今,revert value 有很好的 browser support(耶!),用于回滚到默认的 UA 样式,这是我的 2020 年“请让我有轮廓”sn-p(通常伴随着 @987654324 @ 声明):

      :focus {
        outline: -webkit-focus-ring-color auto thin;
        outline: revert;
      }
      

      或者,如果您希望对outline 的第一个实例使用速记属性:

        outline-color: -webkit-focus-ring-color;
        outline-style: auto;
        outline-width: thin;
        outline: revert;
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-06-08
        • 1970-01-01
        • 1970-01-01
        • 2013-01-20
        • 2022-12-29
        • 2014-02-06
        • 1970-01-01
        • 2020-06-29
        相关资源
        最近更新 更多