jQuery UI button: How do I override the classes used for a single button?

Question

I am using the jQuery UI library out of the box, based on a theme.

Having links rendered as buttons is great, however I need to override some buttons with different colours.

How do I specify an specific class for a particular button to use?

Answer 1

I recommend looking at the CSS for the jQuery UI buttons and duplicating the structure of the CSS which specifies the buttons, but with your own class instead of the jQuery UI classes. Make the overrides that you need in this CSS and include it after the jQuery UI CSS. CSS uses a combination of the most specific selector and ordering to determine which values to apply. By doing this you will make sure that you have the same specificity for each of the CSS selectors used by jQuery so that your CSS takes precedence based on order.

Smashing Magazine has an article that probably has more information than you care to know about the specificity issue.

Answer 2

You can also:

1. Use Developer Tools in the browser (Chrome has great ones).
2. See what class from jQuery UI defines the button color.
3. Override it in your CSS file with the "!important" attribute.

For example, when I needed to override jQuery UI spinner control and remove the borders, I found the class that defines the borders using Chrome Dev Tools. Then in CSS: I added something like that:

.<jquery-ui-class-that-i-found> { border: 0px !important; }

Works great!