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

Question

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

从这个例子开始，我尝试了这个没有成功：

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

（基于this question and answer的提示）。

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

score 25 · Accepted Answer

我不相信这focus是你需要定位的类，它是 CSS psuedo-class:focus

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

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

score 24 · Accepted Answer

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

选项1

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

.ui-widget * { outline: none; }

选项 2

使轮廓颜色透明：

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

score 15 · Accepted Answer

15

我设法将其删除

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

于 2014-02-10T03:24:45.637 回答

score 4 · Accepted Answer

如果您只想删除特定选项卡上的大纲，那么我建议您使用以下内容：

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

在你的 html 的 script 标签内。

score 3 · Accepted Answer

您可以通过指定禁用大纲outline-width: 0;

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

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

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

score 3 · Accepted Answer

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

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

score 1 · Accepted Answer

1

你可以试试这个

a:focus { outline: none; }

于 2015-01-03T18:58:18.870 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

奇怪的是，这些都不适合我。我必须添加一个边框才能使轮廓（或者它可能是一个蓝色边框）消失：

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

9 回答 9