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

User · Answer

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

User · Answer

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

User · Answer

I was having trouble with mobile touchscreen button styling  This will fix your hover-stick   active button problems   x000D   x000D  body  html     width  600px    p     font-size  20px     button     border  none    width  200px    height  60px    border-radius  30px    background   00aeff    font-size  20px     button active     background  black    color  white      delayed     transition  all 0 2s    transition-delay  300ms      delayed active     transition  none    x000D   lt h1 gt Sticky styles for better touch screen buttons  lt  h1 gt    lt button gt Normal button lt  button gt    lt button class  delayed  gt  lt a href  https   www google com   gt Delayed style lt  a gt  lt  button gt    lt p gt The CSS  active psuedo style is displayed between the time when a user touches down  when finger contacts screen  on a element to the time when the touch up  when finger leaves the screen  occures    With a typical touch-screen tap interaction  the time of which the  active psuedo style is displayed can be very small resulting in the  active state not showing or being missed by the user entirely   This can cause issues with users not undertanding if their button presses have actually reigstered or not  lt  p gt    lt p gt Having the the  active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button  lt  p gt  x000D   x000D   x000D

[javascript] :touch CSS pseudo-class or something similar?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to mobile