Edit Question - KnowledgeHub

Title Body

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.

Tags (comma-separated) Cancel