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

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>