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).