Apply CSS to jQuery Dialog Buttons

So I currently have a jQuery dialog with two buttons: Save and Close. I create the dialog using the code below:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

However, both buttons are the same color when this code is used. I'd like my Cancel button to be a differen开发者_运维问答t color than my Save. Is there a way to do this using some built in jQuery options? I didn't get much help from the documentation.

Note that the Cancel button I'm creating is a pre-defined type, but 'Save' I'm defining myself. Not sure if that will have any bearing on the issue.

Any help would be appreciated. Thanks.

UPDATE: Consensus was that there were two roads to travel here:

1. Inspect the HTML using a Firefox plugin like firebug, and note the CSS classes that jQuery is applying to the buttons, and take a stab at overriding them. Note: in my HTML, both buttons were used the exact same CSS classes and no unique IDs, so this option was out.
2. Use a jQuery selector on dialog open to catch the button that I wanted, and add a CSS class to it then.

I went with the second option, and used the jQuery find() method as I think this is more appropriate than using :first or :first-child b/c the button that I wanted to change wasn't necessarily the first button listed in the markup. Using find, I can just specify the name of the button, and add CSS that way. The code I ended up with is below:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
        open: function() {
            $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass');
        }
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

I’m reposting my answer to a similar question because no-one seems to have given it here and it’s much cleaner and neater:

Use the alternative buttons property syntax:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: [
        {
            text: "Cancel",
            "class": 'cancelButtonClass',
            click: function() {
                // Cancel code here
            }
        },
        {
            text: "Save",
            "class": 'saveButtonClass',
            click: function() {
                // Save code here
            }
        }
    ],
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

You can use the open event handler to apply additional styling:

 open: function(event) {
     $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
 }

I think there are two ways you can handle that:

1. Check using something like firebug if there is a difference (in class, id, etc.) between the two buttons and use that to address the specific button
2. Use something like :first-child to select for example the first button and style that one differently

When I look at the source with firebug for one of my dialogs, it turns up something like:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <button class="ui-state-default ui-corner-all ui-state-focus" type="button">Send</button>
    <button class="ui-state-default ui-corner-all" type="button">Cancel</button>
</div>

So I could for example address the Send button by adding some styles to .ui-state-focus (with perhaps some additional selectors to make sure I override jquery's styles).

By the way, I´d go for the second option in this case to avoid problems when the focus changes...

You should change the word "className" for "class"

buttons: [ 
    { 
        text: "Cancel",
        class: 'ui-state-default2', 
        click: function() { 
            $(this).dialog("close"); 
        } 
    }
],

Maybe something like this?

$('.ui-state-default:first').addClass('classForCancelButton');

Select the div which has role dialog then get the appropriate buttons in it and set the CSS.

$("div[role=dialog] button:contains('Save')").css("color", "green");
$("div[role=dialog] button:contains('Cancel')").css("color", "red"); 

There is also a simple answer for defining specific styles that are only going to be applied to that specific button and you can have Jquery declare element style when declaring the dialog:

id: "button-delete",
text: "Delete",
style: "display: none;",
click: function () {}

after doing that here is what the html shows:

doing this allows you to set it, but it is not necessarily easy to change using jquery later.

Why not just inspect the generated markup, note the class on the button of choice and style it yourself?

I suggest you take a look at the HTML that the code spits out and see if theres a way to uniquely identify one (or both) of the buttons (possibly the id or name attributes), then use jQuery to select that item and apply a css class to it.

If still noting is working for you add the following styles on your page style sheet

.ui-widget-content .ui-state-default {
  border: 0px solid #d3d3d3;
  background: #00ACD6 50% 50% repeat-x;
  font-weight: normal;
  color: #fff;
}

It will change the background color of the dialog buttons.