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

Question

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

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

我试过以下

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

但它不起作用。

Answer 1

：focus是一个伪元素，因此需要将其附加到链接等其他内容。查看我的示例并单击链接框，它变为红色，由：focus属性设置样式。应该可以在任何浏览器中使用：

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

a:focus
{
  background: red;
  }

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