: touch CSS pseudo-class or something similar?

Question

I'm trying to make a button, so when the user clicks on it, it changes its style while the mouse button is held down. I also want him to change his style in the same way if he is affected in a mobile browser. Apparently, the obvious thing for me was to use CSS: an active pseudo-class, but that didn't work. I tried: to concentrate, and that didn't work either. I tried: hover over the mouse and it seems to have worked, but it retained the style after I removed my finger from the button. All these observations were on the iPhone 4 and Droid 2.

Is there a way to reproduce the effect on mobile browsers (iPhone, iPad, Android and, hopefully, others)? So far 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-based browsers.

I am wondering if there is an easier way to do this without involving Javascript.

Answer 1

No W3C specs :touch http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active should work, I think.

An order for the pseudo-class :active / :hover important for proper operation.

Here is a quote from the link above

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

• The hover class pseudo-class is applied when the user points to an element (with some pointing device), but does not activate it. For example, a visual user agent can apply this pseudo-class when the cursor (mouse pointer) hovering over a field generated by an element. User agents not supporting interactive media should not support this pseudo-class. Some supportive user agents that support interactive media will not be able to support this pseudo-class (for example, a device handle).
• An active pseudo-class is applied when an element is activated by the User. For example, between when the user presses the mouse button and releases it.
• The: focus pseudo-class is applied when an element has focus (accepts keyboard events or other forms of text input).

Answer 2

Since mobile communication does not provide feedback, I want, as a user, to see instant feedback when listening to the link. I noticed that -webkit-tap-highlight-color is the fastest for a response (subjective).

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

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