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?

Amon

Answer 1

This should do the trick (CSS):

*{    
    outline:none;
}

Phellem

This fixed one of the dialogs, but the other one still has an "outline" around the <button>. This line of CSS is the last line in the last file, so it should have priority over any other styling. – Amon

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.

Lands

As a follow up, I just added that open: function after the buttons options, and just did $('button'). Wasn't working using the id/class and :button for me. – Greenish

I like this solution, the accepted removes the mouse-over effect from my link. – Mei