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?

Ishmul

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.

Outwear

Yes it does... click inside the Result window, and hit <TAB> (you should see a red dotted line around the first tab element). Maybe we're chasing different issues? – Outwear

Ah, cool, I see that now. But in mac-chrome, clicking a tab puts a blue border around the same tab. I am trying to change that. – Ishmul

It has something to do with how fine-grained your selector is. Using *:focus { outline:none } works, but so does #tabs ul li a:focus { outline:none; /* outline-color:red */; } - paste that CSS into your fiddle, you'll see. Mac Lion & Chrome tested – Outwear

To prove my statement above replace your class-based '.ui....' selector in the fiddle you passed me with #tabs ul li a:focus, #tabs ul li:focus. Don't change the CSS. Now, on click/active, and <TAB> what once was fuzzy light blue will be dotted red line. – Outwear

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.

Ridglee

On a Mac, outline-color:transparent actually changes the color from the default blue to a graphite color. (OS X Lion + Chrome) – Outwear

@Dawson, agreed. Simply replace with outline: none; – Expiratory

This worked for me where the accepted answer did not for some reason. Thank you! – Erlina

Answer 3

I managed to remove it with

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

Dallis

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.

Carin

congrats to your first answer! make sure to have a look at the markdown (message formatting syntax) help page. – Fabron

Answer 5

You can disable the outline by specifying outline-width: 0;

#tabs li a
{
    outline-width: 0;
}​

---

A more generic solution without using IDs would be:

.ui-tabs ul li a
{
    outline-width: 0;
}​

Demo: http://jsfiddle.net/ebCpQ/

Hindemith

This requires I know the div id ahead of time. I am dynamically creating tabbed panels (with auto-generated ida), so I believe I would have to dynamically insert css to use this solution? – Ishmul

Answer 6

I had to do this to prevent possible initial tab order focus too:

.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a, .ui-state-focus:focus {
    outline:none;
}

Lynseylynus

Thanks! This removed the blue underline on the currently focused tab! – Dulcimer

Answer 7

you can try this

a:focus { outline: none; } 

Daviddavida

Answer 8

To make it more clear, the outline appears on the element inside of the ul.ui-tabs li.ui-tabs-nav. Most of above examples forgot to mention this: so here is a working answer for the original question:

.ui-tabs-nav .ui-state-focus a {
    outline: none;
}     

http://jsfiddle.net/xJ9Zr/5/

Susansusana

Answer 9

Oddly enough, none of this worked for me. I had to add a border to get the outline (or maybe it was a blue border) to go away:

.ui-state-hover, .ui-state-focus, .ui-state-active
{
    border: 1px solid #ccc !important; /*Or any other color*/
    border-bottom: 0 !important;
} 

Erlina