Dialog box icon

I have the following script where I have been trying to customise the look and feel of the dialog box:

http://jsfiddle.net/7CvZ9/18/

However, I can't seem to figure out how to customise the close icon.

Does anyone know how to do that?

I have customised other parts of the dialog but looking at the theme api:

htt开发者_StackOverflow中文版p://jqueryui.com/docs/Theming/API

But from that link, I can't figure out how to customise the close icon.

So basically, I want to replace the existing 2 state image, with my own 2 state image sprite file.

Use this CSS:

.ui-dialog-titlebar-close {
    /* Default image */
    background-image:url('http://www.charlottemotorspeedway.com/images/icon_x.png');
}

.ui-dialog-titlebar-close:hover,
.ui-dialog-titlebar-close:focus {
    background-color:transparent !important;
    border:none !important;
    /* Hover state image */
    background-image:url('http://www.charlottemotorspeedway.com/images/icon_x.png') !important;
}

Example, I swapped out the X for a new image: http://jsfiddle.net/AlienWebguy/7CvZ9/22/

A jQuery ui theme contains sprite images of all the icons grouped together and organzined in the same file.

You can change the icons in your customized theme file.

the files are named something like: ui-icons_222222_256x240.png

and can be foudn in the images folder of the theme

the image looks something like that:

The class involved in the close icon are:

.ui-dialog-titlebar-close 
.ui-icon-closethick

This is the generated markup

<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
<span class="ui-icon ui-icon-closethick">close</span>
</a>

i think you should override those two classes to change the way the button looks