Menu
Using my iPhone to preview a webpage I'm working on, I notice that whenever I click an input, I see a brief flash of grey behind it.
I've stripped out all the CSS but the grey flashing remains. It's not visible on desktop Safari, only mobile Safari.
What is causing it? How do I stop it from happening?
<!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>
245
I googled the American spelling gray and found an answer on CSS-tricks.
-webkit-tap-highlight-color: rgba(0,0,0,0);And then to allow:active stylesto work in your CSS on a page in Mobile Safari:document.addEventListener("touchstart", function(){}, true);
Edit
Actually, I only need -webkit-tap-highlight-color: rgba(0,0,0,0); to override the grey flash.
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
