disable mobile browser click/touch/tap feedback box

Question

In an HTML 5 site a user, who's surfing through a mobile device, clicks a link.
The browser draws a box (rectangle) as a feedback (in addition to a sound).
Browser might mean Android 2.3's stock browser, or Opera Mobile.

Made some research about it but really, no (clear) solution.

I'd like to avoid this (blue) box. At least for iPhone and Android based devices. Any idea?

P.S I'm also using jQuery

score 47 · Accepted Answer · edited Jul 19 '18 at 06:12

47

This is a duplicate of: Can I remove Android default link styling in webview and iPad Safari: How to disable the quick blinking effect when a link has been hit.

The answer being: add this CSS

* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

edited Jul 19 '18 at 06:12

Soviut

88,194
49
192
260

answered Oct 19 '12 at 04:41

Brenton Fletcher

1,280
10
15

1

Correct, for some reason it did not work when asked, so thanks! – Poni Oct 20 '12 at 00:00

Stanislav Terletskyi · Answer 2 · 2016-08-08T09:43:50.780

24

I'm +1 to an answer, provided by bloopletech. But if you'd like to have this trick worked in an android native browser (Android Browser), use next:

* { 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

edited Aug 08 '16 at 09:43

answered Nov 03 '14 at 15:25

Stanislav Terletskyi

2,072
20
17

JoeFlash · Answer 3 · 2018-07-23T21:15:06.690

-1

The blue outline you see on link is the result of an 'outline'. To turn it off set:

outline: none;

Not sure why this has not yet been answered correctly.

edited Jul 23 '18 at 21:15

answered Sep 01 '17 at 14:48

JoeFlash

74
1
3

3

Actually the outline isn't what OP was asking about. – Alex K Sep 24 '18 at 17:47

disable mobile browser click/touch/tap feedback box

3 Answers3