Apply CSS to jQuery Dialog Buttons

Question

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,
             


        

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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

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

Answer 5

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.

Answer 6

Maybe something like this?

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