У меня есть следующий очень простой 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/
Спасибо!