How do I remove an active outline from jquery acco

Question

I am using Jquery Accordion. The active link has an outline. I have tried using css:

#accordion a:focus
 { outline: none; }
#accordion a:active 
{outline: none; font-weight:bold;}

and also

#accordion a:-moz-any-link:focus 
{ outline: none; }

None of these seem to work. Can anyone advise a setting or another option to remove the dotted outline around the active links?

Answer 1

Add this to your CSS stylesheet and it will take care of the blur/focus outline:

#accordion .ui-state-focus{
    outline: none;
}

Answer 2

You need to figure out the tab element's class being applied by the widget. For instance,

.ui-state-focus { outline: none; }

works on the most recent version of jQuery UI, but on an earlier version like the 1.6, you'd need to use this:

.ui-accordion-header {outline: none;}

Answer 3

I have only seen this happen with header tags so far. To remove it, add the code

h1, h2, h3, h4{outline:none;}

Answer 4

Be sure to press F5 once in a while... and make sure you are not editing other files than you think you are.

Answer 5

When I need to override the styles applied by jQuery UI elements, I usually add a stylesheet that I load after the jQuery UI stylesheet and put my overrides into it, using the same selectors so that I know that my styles will take precedence. In this case look for the styles associated with the accordion or the widget state and override them.

Answer 6

If you're using jQueryUI's Accordion, http://jqueryui.com/demos/accordion/, you shouldn't have a problem with these types of outlines. If you are though, you could do the following:

$(".ui-accordion-header a").click(function(){
  $(this).blur();
});

In fact, this method will work with just about any accordion plugin - just be sure to modify the selector to target the links responsible for expanding/collapsing the data panels.