:active pseudo-class doesn't work in mobile safari

iphone css webkit mobile-safari pseudo-class
Jesse Rusak picture Jesse Rusak · Oct 7, 2010 · Viewed 89.9k times · Source

In Webkit on iPhone/iPad/iPod, specifying styling for an :active pseudo-class for an <a> tag doesn't trigger when you tap on the element. How can I get this to trigger? Example code:

<style> 
a:active { 
    background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>

Answer

wilsonpage picture wilsonpage · Jan 16, 2012 
<body ontouchstart="">
    ...
</body>

Applied just once, as opposed to every button element seemed to fix all buttons on the page. Alternatively you could use this small JS library called 'Fastclick'. It speed up click events on touch devices and takes care of this issue too.

Related questions

iPhone WebKit CSS animations cause flicker

This is the iphone site: http://www.thevisionairegroup.com/projects/accessorizer/site/ After you click "play now" you'll get to a game. The guns will scroll in. You can scroll the purse and accessories up and down. You can see …

Read More
Disabled input text color

The simple HTML below displays differently in Firefox and WebKit-based browsers (I checked in Safari, Chrome and iPhone). In Firefox both border and text have the same color (#880000), but in Safari the text gets a bit lighter (as if it …

Read More
position: fixed doesn't work on iPad and iPhone

I have been struggling with fixed positioning in iPad for a while. I know iScroll and it does not always seem to work (even in their demo). I also know that Sencha has a fix for that, but I couldn't …

Read More