Question

我有以下非常基本的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/

谢谢！

Answer 1

您尝试过吗：

<style type="text/css">
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Disable selection/copy in UIWebView */
}
</style>

如Disabling user selection in UIWebView

所示

在iPhone上按按钮时如何摆脱烦人的灰色高光效果

1 个答案: