JQuery spinner button won't activate active state
I am trying to set up the active state of jQuery spinner buttons like this:
.ui-spinner .ui-spinner-button:hover {
background: #FF0;
}
.ui-spinner .ui-spinner-button:active{
background: #0FF;
}
Guidance works, but not active. See jsfiddle example here .
I apologize for the ugly colors - just for their sake.
Update: The problem is primarily with Firefox - it is not present in Chrome
source to share
I don't know how to do it in css, tried some options but they don't work, but I managed to solve it in jquery by trying it
$(".ui-spinner .ui-spinner-button").click(function(){
//background you want to be in active state
$(this).css("background","#111");
//reverse the background in 0.1 second
setTimeout(function(){
$(".ui-spinner .ui-spinner-button").css("background","#fff");
}, 100);
});
it works in both firefox and chrome, but you have to remove: active from css as it will work in chrome and you will get a combination of active state with color specified in css as well as in jquery
source to share
It looks like the jQuery background image takes precedence over the background color in Firefox. Try the following:
.ui-spinner .ui-spinner-button:hover {
background-color: #FF0;
background-image:none;
}
.ui-spinner .ui-spinner-button:active{
background-color: #0FF;
background-image:none;
}
source to share
Just replace: active pseudo-selector with: focus. See here: http://jsfiddle.net/xvWG5/92/
PD: I also changed type="submit"
to type="button"
, so I stay on the page.
Your new violin will be fixed the same way. Checked: http://jsfiddle.net/xyb9fr35/2/
Same thing: replace :active
with :focus
and use #testSpinner
as a selector instead of a class, because this class is not in the DOM when css is applied.
source to share