CODEWITHSUNDEEP
htmlmobile
Poni
Poni

Reputation: 11327

disable mobile browser click/touch/tap feedback box

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

Upvotes: 23

Views: 16296

Answers (3)

JoeFlash
JoeFlash

Reputation: 74

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.

Upvotes: -1

Brenton Fletcher
Brenton Fletcher

Reputation: 1298

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); }

Upvotes: 49

Stanislav Terletskyi
Stanislav Terletskyi

Reputation: 2112

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);
}

Upvotes: 24

Related Questions