Unable to style the active state of jqueryUI's Dialog close button

I wish to style the active state of the close button (in the titlebar) in jqueryUI's dialog开发者_高级运维. I have styled its normal and :hover state fine. But the :active state never seems to trigger.

Is there something in the plugin that prevents the :active state in the close button's link from working? Can this be changed so it will work?

Here's an example of the problem: View example

---

It is consequence of disabling selection for TitleBar of Dialog Widget in browser which don't support 'selectstart' event. For those browser they disable 'mousedown' event instead.

line 145: jquery.ui.dialog.js

        uiDialogTitlebar.find( "*" ).add( uiDialogTitlebar ).disableSelection();

line 120: jquery.ui.core.js

    disableSelection: function() {
    return this.bind( ( $.support.selectstart ? "selectstart" : "mousedown" ) +
        ".ui-disableSelection", function( event ) {
            event.preventDefault();
        });
},

enableSelection: function() {
    return this.unbind( ".ui-disableSelection" );
}

so you can use enableSelection() or unbind it yourself

---

The :active state is only triggered when it is clicked. On that point your dialog will close immediately, so I doubt you can see it's state. Can you provide an example if this doesn't answers your question?

---

Given the comments of @Bizniztime, why not do this in javascript?

$(".ui-dialog-titlebar-close").mousedown(function() {
    $(this).css("background", "#000");
}).mouseover(function() {
    $(this).css("background", "#0F0");    
}).mouseout(function() {
    $(this).css("background", "#F00");    
});

You could also add/remove classes...