如何在 Safari 中显示 a:focus 颜色和轮廓？

Question

似乎通常人们都想摆脱浏览器焦点轮廓，这就是为什么我找不到这个问题的答案。

我正在尝试显示轮廓并在单击锚标记后更改它们的颜色。以下代码在 Chrome 和 Firefox 上按预期工作，但在 Safari 上不起作用（例如，在 Safari 8.0 (10600.1.25.1) 上，我只看到单击时颜色发生变化，但是returns 到原来的颜色）。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

a:focus {
  color:red;
  outline-style: dotted;
  outline-color: red;
  outline-width: 2px;
}

</style>

</head> 
<body>

<a href='#'>Click Me</a>
<a href='#'>Click Me Also</a>

</body>
</html>

你可以试试here (jsfiddle)。

Answer 1

尝试使用 -webkit- 作为前缀
Demo
例如：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

a:focus {
  color:red;
  -webkit-border: 2px dotted red;
  border: 2px dotted red;
}

</style>

</head> 
<body>

<a href='#'>Click Me</a>
<a href='#'>Click Me Also</a>

</body>
</html>

Answer 2

发生这种情况是因为 Safari 只能呈现活动状态而不能呈现焦点。所以我们可以添加相同的 css 与 active 但 active 和 focus 的行为是不同的。焦点保持在 ouline 上，直到其他点击文档，所以我们将使用添加 class .focusedA 当点击 link 并添加 css 活动时。但是当我们点击 document expect than link 然后删除 class 时，第二个条件的实现仍然是 i。 e.删除 class focusedA。我想你会这样做的。

$(function(){
  
  $("a.withAct").click(function(){
   $(this).addClass("focusedA");
   $(this).off();
  });
  
  
 });

a.withoutAct:focus,a.withAct:active,.focusedA {
  color:red;
  outline-style: dotted;
  outline-color: red;
  outline-width: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href='#' class="withoutAct">Click Me</a>
<a href='#' class="withAct">Click Me Also</a>

如何在 Safari 中显示 a:focus 颜色和轮廓？

How to show a:focus color and outline in Safari?

html

css

safari