0

How can I override the hover and click states of a jQuery Mobile button?

I have a button like this:

<a class="aButton" href='#' data-role="button" data-icon="check">My Button</a>

If I use the following CSS override, it still highlights the button if I hold on it or click it, I don't want any of those. I just can't figure out what is causing the highlighting, I've tried everything (it's a button style B, but thought I'd put all the other classes in just in case)!

.ui-btn, a, .aButton, .ui-btn-a, .ui-btn-b, .ui-btn-c, .ui-btn-d, .ui-btn-e, .ui-btn-down-a, .ui-btn-down-b, .ui-btn-down-c, .ui-btn-down-d, .ui-btn-down-e, .ui-btn-hover-a, .ui-btn-hover-b, .ui-btn-hover-c, .ui-btn-hover-d, .ui-btn-hover-e {
    background: -moz-linear-gradient(#DDDDDD, #CCCCCC) repeat scroll 0 0 #030303 !important;
}

2 Answers 2

1

use :hover and :active

e.g. .aButton:active{ /* styles */ }

1
  • Thanks for the help but the !important in my CSS should override those
    – Timm
    Aug 30, 2012 at 15:47
0

Just realised I was doing something stupid. The background wasn't being applied at all because I was using -moz-linear-gradient on my Android phone when it should be -webkit-linear-gradient... wooops.

Not the answer you're looking for? Browse other questions tagged or ask your own question.