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?

score 25 · Accepted Answer · answered Jan 04 '13 at 04:52

25

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.

answered Jan 04 '13 at 04:52

Dawson

7,567
1
26
25

Yes it does... click inside the Result window, and hit (you should see a red dotted line around the first tab element). Maybe we're chasing different issues? – Dawson Jan 04 '13 at 15:46
1

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. – jedierikb Jan 04 '13 at 15:48
3

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 – Dawson Jan 04 '13 at 17:24
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 `` what once was fuzzy light blue will be dotted red line. – Dawson Jan 04 '13 at 17:45

James Hill · Answer 2 · 2015-02-12T19:09:45.830

24

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.

edited Feb 12 '15 at 19:09

answered Jan 03 '13 at 18:33

James Hill

60,353
20
145
161

2

On a Mac, `outline-color:transparent` actually changes the color from the default blue to a graphite color. (OS X Lion + Chrome) – Dawson Jan 04 '13 at 17:26
@Dawson, agreed. Simply replace with `outline: none;` – Matt Dec 12 '13 at 16:05
1

This worked for me where the accepted answer did not for some reason. Thank you! – deebs Mar 16 '15 at 18:14

score 15 · Answer 3 · answered Feb 10 '14 at 03:24

15

I managed to remove it with

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

answered Feb 10 '14 at 03:24

DJ22T

1,628
3
34
66

score 4 · Answer 4 · edited May 17 '13 at 07:18

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.

edited May 17 '13 at 07:18

collapsar

17,010
4
35
61

answered May 17 '13 at 07:01

Gabriel N.

51
2

1

congrats to your first answer! make sure to have a look at the [markdown (message formatting syntax) help page](http://stackoverflow.com/editing-help). – collapsar May 17 '13 at 07:20

techfoobar · Answer 5 · 2013-01-04T02:37:38.873

3

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/

edited Jan 04 '13 at 02:37

answered Jan 03 '13 at 18:44

techfoobar

65,616
14
114
135

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? – jedierikb Jan 03 '13 at 19:51

score 3 · Answer 6 · answered Jan 16 '15 at 02:21

3

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

answered Jan 16 '15 at 02:21

Ryan

491
4
16

Thanks! This removed the blue underline on the currently focused tab! – Arun Christopher May 24 '17 at 16:25

score 1 · Answer 7 · answered Jan 03 '15 at 18:58

1

you can try this

a:focus { outline: none; }

answered Jan 03 '15 at 18:58

Arsalan

128
1
8

score 0 · Answer 8 · answered Jun 08 '13 at 18:20

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/

score 0 · Answer 9 · answered Aug 23 '18 at 14:37

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

Remove outline from active jQuery UI tab?

9 Answers9