How do I remove an active outline from jquery accordion?

user_253252 0
Viewed 18744

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?

accordion outline jquery
7 Answers

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.

user_546800

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.

user_129500

SORTED:

amend the css to - ui-state-focus

user_2532520

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

user_2533100
Related