html - 如何在 iPhone 上按下按钮时摆脱恼人的灰色高光效果

问题描述

我有以下非常基本的HTML代码：

<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
    outline: none;
}
a {
    padding: 6px 20px;
    border: 1px solid #bdbdbd;
    border-radius: 6px;
    text-decoration: none;
    font-size: 100px;
}
a:active {
    box-shadow: 0px 0px 4px 0px #b9b9b9;
    -webkit-box-shadow: 0px 0px 4px 0px #b9b9b9;
}

</style>
<title>IPhone - Button</title>
</head>
<body>
    <a href="#">Long Press This</a>
</body>
</html>

当我在真实IPhone设备上打开它时，我得到以下信息：

但是当我长按按钮时，我得到以下信息：

带有非常烦人的灰色突出背景。

我只在 iPhone 上得到那种烦人的效果。我在其他浏览器（Android、Windows、MacOS）上尝试了同样的方法，但没有得到那种效果。

关于如何摆脱它的任何想法？

在这里，您有代码的内联演示：

* {
	outline: none;
}
a {
	padding: 6px 20px;
	border: 1px solid #bdbdbd;
	border-radius: 6px;
	text-decoration: none;
	font-size: 40px;
}
a:active {
	box-shadow: 0px 0px 4px 0px #b9b9b9;
	-webkit-box-shadow: 0px 0px 4px 0px #b9b9b9;
}

<a href="#">Long Press This</a>

请注意，我需要在box-shadow上面同时摆脱灰色突出显示。换句话说，我需要在其他浏览器上获得相同的效果。

它也在这里JSFiddle.net：

http://jsfiddle.net/05kqt7m3/

http://jsfiddle.net/05kqt7m3/embedded/result/

谢谢！

标签： htmlcss

html - 如何在 iPhone 上按下按钮时摆脱恼人的灰色高光效果

问题描述

解决方案

推荐阅读