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

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: