Question

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

我试图显示一个轮廓，并在点击后更改锚标签的颜色。以下代码在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）。

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，直到其他点击文档，所以我们将使用添加类.focusedA当点击链接添加活动的CSS。但是当我们点击文件期望比链接然后删除类，第二个条件的实现仍然是我。即删除课程重点A.我想你会这样做。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: