How do you override CSS applied by jQuery UI theme properly?

Question

According to this question (and common sense) I should be able to change characteristics of a jQueryUI Widget such as a button after load. For example, set the background of a particular Button Red.

When I try using css or even using the $('.selector').css({'background-color': 'Red'}) after the .button() call, the button flashes red on load and goes back to the jQuery UI theme. How do I stop jQuery UI from overriding the overrides?

Answer 1

jQuery UI supplies a neat callback for when it's done creating the element. That's where you'd want to do the color change.

$( ".selector" ).button({
    create: function(event, ui) {
    $('.selector').css({'background-color': 'Red'})
}
});

Answer 2

Are you selecting for the button element or its child span tag? This example works for me:

http://jsfiddle.net/8UvZ5/