Preventing instant focus of links or buttons in a jQuery UI Dialog?

Question

I have two different modal dialogs in certain pages of mine. One has a <input type="button"/> and the other has a regular <a href=""> link. When these modals appear, they show (at least in Chrome on Mac OS X) a thick blue border around these elements. As I type this question on SO, I have the same blue border around the text area, but this is a desired effect. I want to get rid of the blue focus borders that instantly appear around the elements I described. Any help?

Answer 1

This should do the trick (CSS):

*{    
    outline:none;
}

Answer 2

I know this is an old question but I was just researching how to remove the focus from links and buttons in a jQuery UI dialog. I mean not just the outline (which you can do with css like the other answer suggests), but the actual focus, so that if user hits enter, it won't take him to where the link or button is pointing.

It seems the best way to do this is by adding this to your dialog's JS:

open: function(){
  $('#my-dialog :link').blur();
  $('#my-dialog :button').blur();
}

where "my-dialog" is the id of your dialog.

Or you could also do this if you want to target the class instead:

open: function(){
  $('.ui-widget-content :link').blur();
  $('.ui-widget-content :button').blur();
}

I think that would be better answer to your question since you were asking about focus, and this should remove the focus as well as the outline.