title: :touch CSS pseudo-class or something similar?
body: <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      #testButton {
          background: #dddddd;
      }
      #testButton:active, #testButton.active {
          background: #aaaaaa;
      }
  &lt;/style&gt;
  
  ...
  
  &lt;button type="button" id="testButton"&gt;test&lt;/button&gt;
  
  ...
  
  &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
      $("*").live("touchstart", function() {
        $(this).addClass("active");
      }).live("touchend", function() {
        $(this).removeClass("active");
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The :active pseudo-class is for desktop browsers, and the active class is for touch browsers.</p>
  
  <p>I am wondering if there is a simpler way to do it, without involving Javascript.</p>