-webkit-tap-highlight-color: rgba(0,0,0,0); on a div?

Question

Is there any way to apply this to a div?

score 25 · Accepted Answer · edited Jul 28 '22 at 10:06

Are you writing for iPhone/Smartphone websites? If so, then yes. But you'll probably only see the results on your phone/simulator. I think that this element can only be used on links or javascript elements. The div would have to be affected by some kind of scripting, or be a link.

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html

<!DOCTYPE HTML>
<html>

<head>
  <title>Highlighting Elements</title>
  <style type="text/css">
    .borderImage {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
  </style>
</head>

<body>
  <div class="borderImage">
    <a href="#">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non felis risus, tristique luctus lacus. Vestibulum non aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent eleifend augue a ligula ornare quis lacinia risus ullamcorper.
         </a>
  </div>
</body>

</html>

O frabjous day! Callooh! Callay! I've been searching for a way to disable that cursed orange highlight. And there it is. Thank you! — Matt Rogish, Sep 28 '10 at 19:41

score 9 · Answer 2 · edited May 18 '16 at 08:47

9

This should work:

-webkit-tap-highlight-color:transparent

edited May 18 '16 at 08:47

Felix Gerber

1,615
3
30
40

answered May 18 '16 at 08:13

John Doe

91
1
1

score 7 · Answer 3 · edited Nov 11 '11 at 10:39

I applied this to all (*) of my html objects for my iphone web-app.

Simply add this to your css code:

*{
/* Prevent any object from being highlighted upon touch event*/
-webkit-tap-highlight-color: rgba(0,0,0,0); }

I used jQuery mobile to add and handle touchstart and touchend events to my buttons, which handles the background-image of my buttons (actually these are divs), so it looks like they are pressed down on touchstart.

-webkit-tap-highlight-color: rgba(0,0,0,0); on a div?

3 Answers3

Linked