html - 当我单击 iPhone 上的输入时,是什么导致灰色闪烁?
问题描述
使用我的 iPhone 预览我正在处理的网页时,我注意到每当我点击一个输入时,我都会看到它后面出现短暂的灰色闪光。
我已经去掉了所有的 CSS,但仍然存在灰色闪烁。它在桌面 Safari 上不可见,仅在移动 Safari 上可见。
是什么原因造成的?我该如何阻止它发生?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Why do the inputs flash?</title>
<style type="text/css">
input {
display: block;
width: 100%;
border-width: 0 0 1px 0;
border-radius: 0px;
}
</style>
</head>
<body>
<input type="radio" name="mode" id="mode1" value="mode1">
<label for="mode1">Mode 1</label>
<input type="radio" name="mode" id="mode2" value="mode2">
<label for="mode2">Mode 2</label>
<input type="radio" name="mode" id="mode3" value="mode3">
<label for="mode3">Mode 3</label>
<label for="hello">
<input checked type="checkbox" id="hello">
<span class="toggle">
<span class="switch"></span>
</span>
<span class="label">Check me</span>
</label>
<form action="">
<label for="text-input">
Enter text
<input type="text">
</label>
<label for="email-iput">
Enter email here
<input type="email">
</label>
</form>
</body>
</html>
解决方案
我用谷歌搜索了美国拼写gray并找到了关于 CSS-tricks的答案。
-webkit-tap-highlight-color: rgba(0,0,0,0);
然后允许:active styles
在 Mobile Safari 的页面上使用 CSS:document.addEventListener("touchstart", function(){}, true);
编辑
实际上,我只需要-webkit-tap-highlight-color: rgba(0,0,0,0);
覆盖灰色闪光。
推荐阅读
- c# - 重启时如何保存和检索程序设置(.NET & C#)
- java - 如何使用高性能解析器解析 Java 中的 JSON?
- php - 使用 PHP 存储和获取多个段落
- html - 在 HTML 文件中查找值的最佳方法是什么?
- windows - 找不到监控预装 Win10 应用程序卸载的方法
- google-analytics - 我如何让 GA 跟踪另一个站点上发生的事件?
- javascript - 如何将设置的字符串值复制到剪贴板?
- javascript - React Native / Firebase Messaging - 永远不会发送消息/通知
- c# - 在没有委托的情况下在 C# 中使用方法作为参数?
- python - 即使设置了种子,LogisticRegressionCV 也会给出不同的答案