:touch CSS pseudo-class or something similar?
JavascriptJqueryHtmlCssMobileJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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).
Solution 2 - Javascript
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;
}
Solution 3 - Javascript
I was having trouble with mobile touchscreen button styling. This will fix your hover-stick / active button problems.
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;
}
<h1>Sticky styles for better touch screen buttons!</h1>
<button>Normal button</button>
<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>
<p>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.</p>
<p>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.</p>