Remove outline from active jQuery UI tab?

Question

I want to remove the outline on an active jQuery UI tab (or at least change the color).

Working from this example, I tried this unsuccessfully:

<style>
    #tabs .ui-state-focus
    {
        outline: none;
    }
</style>

(based on a tip from this question and answer).

What's the trick to removing the outline from an active tab?

Answer 1

I don't believe it's the class focus that you need to target, it's the CSS psuedo-class :focus

.ui-state-focus:focus { outline:1px dotted red !important }

if that works, go with {outline:none} to remove it. You are sort of jacking up your accessibility by worrying about it though, FYI.

Answer 2

There are lots of ways to do this. Here are two examples (I suggest option 2):

Option 1

Remove the outline from all elements that use the .ui-widget class:

.ui-widget * { outline: none; }​

Here's a working fiddle.

Option 2

Make the outline color transparent:

#tabs li a
{
    outline-color: none;
}​

Here's a working fiddle.

Answer 3

I managed to remove it with

.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
     outline:none;
}

Answer 4

if you want to remove the outline only on a specific tabs then I suggest you use the following:

$("#tabs ul li").css({'outline': 'none'}); // where #tabs can be any specific tab group

inside the script tag of your html.