Question

如何在浏览器中实现默认焦点大纲？

我正在谈论当前有焦点的元素周围显示的实线或虚线边框。

我认为这只是浏览器应用的CSS大纲，例如

- (void)shakeWithStrength:(NSInteger)strength {

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.fromValue = [NSValue valueWithPoint:CGPointMake(password.frame.origin.x-strength, password.frame.origin.y)];
animation.toValue = [NSValue valueWithPoint:CGPointMake(password.frame.origin.x+strength, password.frame.origin.y)];

[password.layer addAnimation:animation forKey:@"position"];
}

但是我注意到如果我尝试使用CSS自定义焦点轮廓，它的外观会发生变化，但在某些情况下也是如此。

请参阅我关于内部div的链接焦点大纲的问题，例如：

Custom focus outline for links with div inside

（简而言之，如果你有复杂内容的链接并应用你自己的焦点大纲，事情会变得奇怪）

显然，浏览器并不只是将上面的简单CSS应用于焦点轮廓。他们必须做更多的事情来使默认工作尽可能好，无论它应用于哪个元素。

有谁知道它是如何运作的？

我可以做些什么来使自定义焦点轮廓的行为与默认轮廓相同吗？

Answer 1

这个问题很老了，但是在搜索我想尝试回答的大纲时，我遇到了好几次。

根据outline - CSS: Cascading Style Sheets | MDN，一个outline的声明分为三部分：color、style、width，默认值为：

.outline {
    outline: medium auto currentColor;
    outline: medium auto invert;
}

并且根据another SO answer，WebKit 浏览器有自己的大纲样式，这就是我的全部答案：

.outline {
    outline: medium auto currentColor;
    outline: medium auto invert;
    outline: 5px auto -webkit-focus-ring-color;
}

注意事项：

medium 在我的 Safari 中呈现为 3px，显然不是 5px。
颜色 -webkit-focus-ring-color 呈现为 rgb(0, 103, 244)。

Answer 2

@loikein 的回答效果很好！！！但这不受 IE11 支持。
解决此问题并支持 IE11 的解决方案是：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     outline-color: #666;
     outline-style: dotted;
     outline-width: 1px;
}
outline: medium auto currentColor;
outline: medium auto invert;
outline: 5px auto -webkit-focus-ring-color;

@media 仅适用于 IE11，其他选项适用于@loikein 所写的其他浏览器。（例如：outline: medium auto currentColor - 对于 Firefox）

如何在浏览器中实现默认焦点大纲？

2 个答案: