How do I get rid of this blue halo around the close dialog button with jqueryui?

Question

I am using jquery ui to create a dialog box, importing this style sheet. It has this annoying halo around the close button. I am having trouble getting rid of it because once I click the halo it goes away (some kind of manipulation from jquery ui) -- so I can't see the relevant css rules. I tried to pick the color from a chrome extension (and then search for it in the css file) but once I click it disappears.

How can I make the halo go away? Going back the the default x is fine.

Answer 1

give this a shot:

.ui-button:focus { outline:none !important }

Answer 2

That is indeed caused by the outline property. Chrome and Internet Explorer appear to automatically add an outline to all focused elements. I didn't find anything with Firefox. Here is how you find out using the Chrome Inspector:

If you don't want it to be there all you have to do is target the element with the :focus selector and set the outline:none;.