Question

I have a jQuery UI Button that I am trying to style using CSS. Basically all I want is a dark-green background, and a light-green hover color. I noticed that for whatever reason, specifying the desired styles in my CSS file didn’t work, so I added some code to apply them programmatically when the button is created:

//initialize the jQuery button with the correct styles
$( "button", ".buttonContainer" ).button();

//add a class that we can apply our styles to (jQuery likes to override styles applied to .ui-button)
$(".buttonContainer .ui-button").addClass("greenButton");

//override button styles (doesn't work when done through stylesheet)
$(".greenButton").css("background", "none !important");
$(".greenButton").css("background-color", "#006600 !important");
$(".greenButton").css("border", "1px solid darkGray !important");

//mouseover handler to change the background color (same reason as above)
$(".greenButton").hover(function() {
    //mouse-over handler
    $(this).css("background-color", "green !important");
}, function() {
    //mouse-out handler
    $(this).css("background-color", "#006600 !important");
});

This works fine in Chrome, IE, and Safari, but for some reason Firefox continues showing the default gray button styles (no scripting errors are reported). Interestingly, if I open the web-developer CSS editor, the button gets the correct styles instantly. I have the following in my CSS from back before I realized that the styles would only take if applied programmatically:

.greenButton {
    background-color: #006600 ! important;
}
.greenButton:hover {
    background-color: green ! important;
}

Anyways, what I see in Firefox by default looks like this:

…when it should look like this (as seen in any other browser):

Any ideas?

Answer 1

In your CSS you are only setting the background-color attribute, while jQuery UI buttons are built with background image, which covers the color. You were correct to set ‘background:none’ via JS, but adding it to the element’s style multiple times via css() messes things up a bit – just inspect the style attribute of your button when active in, e.g. FireBug. It might well be that you hit a minor bug in FireFox. It works for me. In any case, here is working jsFiddle

CSS:

.greenButton {
  background: #006600 none ! important;
}
.greenButtonHover {
  background: #009900 none ! important;
}

HTML:

<button>Should be green on hover</button>

JS:

$("button").button();
$("button").addClass("greenButton");
$(".greenButton").hover(function() {
    $(this).addClass('greenButtonHover');
}, function() {       
    $(this).removeClass('greenButtonHover');
});