CSS 从活动的 jQuery UI 选项卡中删除大纲？

Remove outline from active jQuery UI tab?

提问by jedierikb

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

我想删除活动 jQuery UI 选项卡上的轮廓（或至少更改颜色）。

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?

从活动选项卡中删除轮廓的技巧是什么？

回答by Dawson

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

我不相信这focus是您需要定位的类，而是 CSS 伪类:focus

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

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

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

如果可行，请{outline:none}删除它。不过，仅供参考，您有点担心它来提升您的可访问性。

回答by James Hill

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

有很多方法可以做到这一点。这里有两个例子（我建议选项 2）：

Option 1

选项1

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

从使用.ui-widget该类的所有元素中删除大纲：

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

Here's a working fiddle.

这是一个工作小提琴。

Option 2

选项 2

Make the outline color transparent:

使轮廓颜色透明：

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

Here's a working fiddle.

这是一个工作小提琴。

回答by Danny22

I managed to remove it with

我设法删除它

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

回答by Gabriel N.

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.

在您的 html 的脚本标记内。

回答by techfoobar

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

您可以通过指定禁用轮廓 outline-width: 0;

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

---

---

A more generic solution without using IDs would be:

不使用 ID 的更通用的解决方案是：

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

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

演示：http: //jsfiddle.net/ebCpQ/

回答by Ryan

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

我也必须这样做以防止可能的初始 Tab 键顺序焦点：

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

回答by Arsalan

you can try this

你可以试试这个

a:focus { outline: none; } 

回答by deebs

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

回答by Frankey

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:

为了更清楚，轮廓出现在 ul.ui-tabs li.ui-tabs-nav 内部的元素上。上面的大多数例子都忘记提到这一点：所以这是原始问题的有效答案：

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

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

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