I'm trying to change the hover and click states of a jQuery Mobile button, but my current CSS override doesn't seem to be working as expected.
Here's the button code I have:
<a class="aButton" href='#' data-role="button" data-icon="check">My Button</a>
Despite using this CSS override that targets various button classes, the button still highlights when clicked or hovered over. I've tried everything to remove this highlighting effect, but haven't been successful so far. Can someone please help me troubleshoot this issue?
.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;
}