CODEWITHSUNDEEP
cssjquery-uijquery-ui-tabs
jedierikb
jedierikb

Reputation: 13079

Remove outline from active jQuery UI tab?

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?

Upvotes: 16

Views: 22762

Answers (9)

deebs
deebs

Reputation: 1410

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

Upvotes: 0

James Hill
James Hill

Reputation: 61802

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.

Upvotes: 24

Ryan
Ryan

Reputation: 521

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

Upvotes: 3

Arsalan
Arsalan

Reputation: 128

you can try this 

a:focus { outline: none; }

Upvotes: 1

DJ22T
DJ22T

Reputation: 1640

I managed to remove it with 

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

Upvotes: 15

Frankey
Frankey

Reputation: 3757

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/

Upvotes: 0

Gabriel N.
Gabriel N.

Reputation: 51

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.

Upvotes: 4

Dawson
Dawson

Reputation: 7597

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.

Upvotes: 25

techfoobar
techfoobar

Reputation: 66663

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/

Upvotes: 3

Related Questions