How do I remove an active outline from jquery accordion?

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

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;}