代码之家 › 专栏 › 技术社区 › davidesp

如何摆脱IPhone按键时恼人的灰色高亮效果

css3 html5 css html

0

davidesp · 技术社区 · 6 年前

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

谢谢!

1 回复 | 直到 6 年前

1

Bas van Dijk 6 年前

你试过:

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

如中所示 Disabling user selection in UIWebView