如何在Safari中显示：焦点颜色和轮廓？答案

【问题标题】：How to show a:focus color and outline in Safari?如何在Safari中显示：焦点颜色和轮廓？
【发布时间】：2015-01-27 10:02:40
【问题描述】：

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

我正在尝试显示轮廓并在单击锚标记后更改它们的颜色。以下代码在 Chrome 和 Firefox 上按预期工作但在 Safari 上无法正常工作（例如，在 Safari 8.0 (10600.1.25.1) 上，我只看到单击时颜色会发生变化，但之后会返回原始颜色） .

<!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)。

【问题讨论】：

为什么不使用border？
@jbutler483 嗯，也许我应该，但是颜色呢？顺便说一句，您的小提琴在 Safari 上也不起作用（例如，您看不到边框）:(

标签： html css safari

【解决方案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>

【讨论】：

仍然没有运气...我认为该属性称为-webkit-focus-ring-color，但我已经尝试过但它不起作用，或者至少我没有正确使用它...该死的浏览器！
嗯，试试这个，jsfiddle.net/fpqp1zv3/13 并确保您的浏览器是最新的

【解决方案2】：

发生这种情况是因为 safari 只能呈现活动而不是焦点。所以我们可以添加相同的 CSS 和 active，但是 active 和 focus 的行为是不同的。在其他点击文档之前，焦点仍然是 ouline，因此我们将在点击添加了活动 css 的链接时使用添加类 .focusedA。但是当我们点击文档期望而不是链接然后删除类时，第二个条件的实现仍然是 i。 e.删除类集中A。我想你会这样做的。

$(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>

【讨论】：

是的，我想就是这样。我希望在没有 javascript 的情况下逃脱，但非常感谢您的解决方案！