Here is the Less code snippet I am using:
.btn(@width: 80px, @height: 36px, @radius, @font-size: 14px, @font-color, @color) {
...
background-color: @color;
&:focus, &:active {
background-color: darken(@color, 10%);
outline: none;
}
}
.btn {
.btn(5.8rem, 2.6rem, 0.5rem, 1.2rem, #fff, @c-blue);
}
.btn.disabled {
background-color: @c-gray;
&:focus, &:active {
background-color: @c-gray;
}
}
When I apply the
<button class='btn'>button</button><button class='btn disabled'>button</button>background-color still changes upon clicking.
This strange behavior only occurs while using mobile emulation.
The browser user agent for desktop is
"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/37.0.2062.120 Chrome/37.0.2062.120 Safari/537.36"While simulating on mobile, the user agent is
"Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"Here is the compiled CSS generated from the Less code:
.btn {
display: inline-block;
width: 5.8rem;
height: 2.6rem;
line-height: 2.6rem;
font-size: 1.2rem;
color: #fff;
text-align: center;
background-color: #4099de;
border-radius: .5rem;
border: none;
cursor: pointer
}
.btn:focus, .btn:active {
background-color: #2380c8;
outline: none
}
.btn.disabled {
background-color: #9ba6ae
}
.btn.disabled:focus, .btn.disabled:active {
background-color: #9ba6ae
}