Question

We have styled our buttons using:

.button{blah}
.button:active{blah}

When we submit the form, we disable the buttons

$('#letterButtons input').attr('disabled','disabled');

but on webkit, after they have been disabled they still “look” active because they change when clicked.

Tried this but no joy…

$('#letterButtons input').removeClass('button:active');
$('#letterButtons input').removeClass('button\\:active');

Actually after setting the tags, I remembered that we are using Zepto, so it might be a zepto problem…

Answer 1

You could try using:

$('#letterButtons input').trigger('mouseleave');

But this is prone to failing if the mouse is still hovering over the element. You could also use CSS:

#letterButtons button[disabled]:active {
    color: #999;
    background-color: #ccc;
}