How to change background color of jQuery UI Dialog?

If you want to target a specific dialog you can do it this way:

$('#yourDialog').dialog(
{
    autoOpen: false,
    open: function(e) {
        $(e.target).parent().css('background-color','orangered');
    }
});

Use the css classes:

• ui-dialog
  • Main container of whole thing
• ui-dialog-title
  • This is where the title actually appears
• ui-dialog-titlebar
  • Area where title of dialog would be if exist
• ui-dialog-content
  • Area where your div is actually loaded
• ui-resizable-handle
  • These divs are used to resize the dialog but are usually invisble according to your setup
• ui-dialog-buttonpane
  • Here is where buttons would go if exist
• ui-dialog-buttonset
  • This is where the buttons actually appear

Also, unlike answer given selected, take note, YOU DON'T HAVE TO USE !important.

If you want a direct call, set everything up and create your dialog. Load the page in Chrome or FF (chrome easier to read). Then simply open the dialog and select the element you want to change. Look at its CSS in your Browser's Developer Tools. You'll be able to see the exact line jqueryui uses to make it's css call. Simply copy that line into your own CSS and ensure it's loaded later and your dialog will get the new overwrite.

you can use this way

http://jsfiddle.net/dEvKb/15/

You should set to all class background with use !important.

.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}​