所有浏览器的自定义焦点指示器

Question

每个浏览器都有自己的焦点指示器，例如： 当元素通过键盘 Tab 键获得焦点时，Firefox 会有一条虚线。 Chrome 有蓝色边框

有没有办法为所有浏览器设置自定义焦点指示器？

我已经尝试了以下

:focus {
  outline: 2px solid #0000ff; }

但它不起作用。

Answer 1

:focus 是一个伪元素，因此它需要附加到其他东西上，比如链接。查看我的示例并单击链接框，它变为红色，由 a:focus 属性设置样式。应该可以在任何浏览器中工作：

a {
background: #efefef;
  padding: 1em;
  text-decoration: none;
}

a:focus
{
  background: red;
  }

<a href="#">Sample link</a>