How to set :active style to button in mobile

November 30, 2014

Reading time ~1 minute

Outline

How to set :active style to button in mobile ? if you set touchstart and touchend eventListener and switch class (e.g. .active) to button you are happy :) I’ll tell you easier way.

CSS

css is normal. you set :hover, :forcus, and :active Pseudo-classes.

.btn {
  background-color: blue;
}
.btn:hover {
  background-color: red;
}
.btn:focus {
  background-color: green;
}
.btn:active {
  background-color: gray;
}

Javascript

There are a trick. You should set empty function to touchstart event in body like this.

window.onload = function() {
    if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
        document.body.addEventListener('touchstart', function() {}, false);
    }
}

Demo

Try it

Result

There are some difference between browser. These table is summary of style.

browser hover clicking after click
chrome :hover :active :focus
firefox, safari :hover :active :hover
mobile safari   :active :hover
android default browser   :hover :hover

please tell me android chrome result. I don’t have it.

Best plactice

Desktop

match :hover and :focus style.

sass

$hover: red

.btn {
  background-color: blue;
}
.btn:hover {
  background-color: $hover;
}
.btn:focus {
  background-color: $hover;
}
.btn:active {
  background-color: gray;
}

mobile

nothing.

Reference

add ticket number to git commit automatically

Most of ticket tracker like Github, pivotal tracker have function to connect your commit to ticket(story).But every time when you commit ...… Continue reading

I will build frontend and backend separately

Published on September 28, 2016

order of angular controller's initialisation

Published on October 05, 2015