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

css jquery-ui jquery-ui-button
Mark Redman picture Mark Redman · Mar 8, 2010 · Viewed 15.4k times · Source

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

tvanfosson picture tvanfosson · Mar 8, 2010

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.

Related questions

Remove jQuery UI Dialog Button border/outline

Which class do I need to modify/change to remove the outline of a JQuery UI Dialog Button. I can't seem to figure out which class is applying the border/outline around the 'X' button. The outline goes away when …

Read More
jQueryUI Button: How to change Button-Icon 'color'

I have placed a html button inside a div in the following manner: <div class="ui-state-highlight"> <button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary"> <!-- first span --> <span class="ui-button-icon-primary ui-icon ui-icon-disk"&…

Read More
Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More