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

Question

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

Answer 1

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

Answer 2

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?