Remove jQuery UI Dialog Button border/outline

Question

Which class do I need to modify/change to remove the outline of a JQuery UI Dialog Button. I can't seem to figure out which class is applying the border/outline around the 'X' button. The outline goes away when I click on the button.

I'm using this CSS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css

Answer 1

I solved my own question. Turns out that outline-color doesn't have a transparent/none option, so I had to override outline-width for the classes. So I set

outline-width: 0px !important;

Answer 2

The code applying the border to that button is (it includes other things, but I'm putting just the relevant part here):

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #D3D3D3;
}

And in that case, the <button> element matches all 3 selectors, so you could use a selector like this:

.ui-dialog-titlebar > .ui-button {
    border: 3px solid red;
}

To override the default style just for the dialog buttons...

Jsbin Demo

Answer 3

this css works for me.

        <style type="text/css">
          .ui-widget-content {
            border: none !important;
          }
        </style>