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

StackOverflow https://stackoverflow.com/questions/2401414

  •  18-09-2019
  •  | 
  •  

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?

Was it helpful?

Solution

I would say, give the particular button or buttons an id, and:

$("#buttonId").removeClass().addClass("myClass");

If you want to apply it to multiple buttons each with its own id:

$("#buttonId, #anotherButton").removeClass().addClass("myClass");

OTHER TIPS

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.

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!

I think the button API should include a configuration like this where you can change color etc. by passing parameters 

$("button").button({background:"FFFFFF",hover:"FFFFF"});

this is just an idea where you can change some of its visual attributes.

I found this worked for me: $(".btnSave").removeClass("ui-state-default").addClass("SaveButtonStyling");

Basically needed to remove the ui-state-default class and then add my own for the background colour etc.

Thsi meant that the rounded corner class etc stayed put and I was able to amend the background colour etc.

If you simply wish to have some additional/different for particular buttons, simply give the buttons some classes like class="mybuttonclass otherbuttonclass" - multiple classes are allowed. Then, just add css rules for your class(es)

.mybuttonclass
{
   background-color: red;
}
.otherbuttonclass
{
   color:white;
}

thus the background is red with white text - or whatever combination you wish, which would override items in the cascade (CSS) above it. (assumption is that your .CSS file is linked in AFTER the jquery UI css file, or is in-line on the page, both of which would override the jQuery UI css.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top