:touch CSS pseudo-class or something similar?

Question

I am trying to make a button, such that when the user clicks on it, it changes its style while the mouse button is being held down. I also want it to change its style in a similar way if it is touched in a mobile browser. The seemingly-obvious thing to me was to use the CSS :active pseudo-class, but that didn't work. I tried :focus, and it didn't work too. I tried :hover, and it seemed to work, but it kept the style after I took my finger off the button. All of these observations were on an iPhone 4 and a Droid 2.

Is there any way to replicate the effect on mobile browsers (iPhone, iPad, Android, and hopefully others)? For now, I am doing something like this:

<style type="text/css">     #testButton {         background: #dddddd;     }     #testButton:active, #testButton.active {         background: #aaaaaa;     } </style>  ...  <button type="button" id="testButton">test</button>  ...  <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script> <script type='text/javascript'>     $("*").live("touchstart", function() {       $(this).addClass("active");     }).live("touchend", function() {       $(this).removeClass("active");     }); </script> 

The :active pseudo-class is for desktop browsers, and the active class is for touch browsers.

I am wondering if there is a simpler way to do it, without involving Javascript.

Answer 1

There is no such thing as :touch in the W3C specifications, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active should work, I would think.

Order on the :active/:hover pseudo class is important for it to function correctly.

Here is a quote from that above link

Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:

• The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).
• The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
• The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

Answer 2

Since mobile doesn't give hover feedback, I want, as a user, to see instant feedback when a link is tapped. I noticed that -webkit-tap-highlight-color is the fastest to respond (subjective).

Add the following to your body and your links will have a tap effect.

body {     -webkit-tap-highlight-color: #ccc; }