CODEWITHSUNDEEP
javascriptcssonclicktouch
Sander Schaeffer
Sander Schaeffer

Reputation: 2827

Turn off overlay selection on onClick elements on a Touch device

I'm building a web app, but after a click on a button, or at least a clickable object, it gets a blue overlay, like a text selection, but on the object. This only happens on touch devices, not on my desktop machine.

It's built with HTML and CSS, so I hope someone knows an appropriate solution for this.

It took me about 20 screenshots, since this overlay is only visible for less than half a second. For those wondering what I actually mean; check this pic. I've tested this on an iPhone (5) and an Android (Nexus 5) and both (although colors differ) appear to have this visual effect. It's either a HTML thing or device-native thing. One thing for sure: It can be set off, since I've never seen this in a regular app. Note: This happens with any clickable item, not just text links. Screencap

Thanks!

Upvotes: 0

Views: 516

Answers (2)

Sander Schaeffer
Sander Schaeffer

Reputation: 2827

I've gladly found the correct way to adjust this stupid habit of touch devices. It's extremely easy.

You can either turn this off in general (like the code below) or add your own classes/ID's to the selector.

a {
...
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

Just like that!

Tested on both a few Android and iOS devices, including iPhone 5 & Nexus 5

Upvotes: 0

Abhineet
Abhineet

Reputation: 632

Try it...

Working http://jsfiddle.net/XbVUR/

a{
 -moz-user-select: none; 
 -webkit-user-select: none; 
 -ms-user-select:none; 
 user-select:none;
}

<a href="#" onClick="alert(0)"  unselectable='on' onselectstart='return false;' onmousedown='return false;'>lorem ipsum</a>

Upvotes: 1

Related Questions