Replacing the Close icon for a JQueryUI Dialog box

Question

After extensive searching on this topic, I haven\'t been able to find an answer, so hopefully someone can help me with this issue. I have a relatively basic dialog box:

Answer 1

Try to see the structure of the dialog and it should not be hard to do it.

http://jqueryui.com/demos/dialog/#theming

Use the create event to change the class of the close button icon to class of another icon will do.

http://jsfiddle.net/Quincy/kHU2M/1/

$("#dialog-search").dialog({
    create: function(event, ui) { 
      var widget = $(this).dialog("widget");
      $(".ui-dialog-titlebar-close span", widget)
          .removeClass("ui-icon-closethick")
          .addClass("ui-icon-minusthick");
   }
});

Answer 2

Old question, but maybe I'll help someone. Following CSS made the trick for me, totally custom Close button UI. Not very elegant :), but works fine for me.

.ui-icon-closethick {
    background-image: url(images/my-10px-image.png) !important;
    background-position: left top !important;
    margin: 0 !important;
}

.ui-dialog .ui-dialog-titlebar-close, .ui-icon-closethick {
    width: 10px !important;
    height: 10px !important;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: none !important;
    border: none !important;
}

.ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar-close:hover {
    padding: 0 !important;
}

My custom close button shown below: