jQuery UI-删除焦点上的橙色选项卡边框

我正在尝试删除此边界：

由于它只显示在焦点上，我无法使用chrome控制台找到要覆盖的类

有没有人这样做过，并且知道我应该覆盖什么类

---

编辑：我想这是标准行为，您可以看到示例。我也在使用Chrome。

您可以覆盖

ui状态焦点

和

ui状态活动

css类

li a
{
    outline-color: transparent;
}​

.ui-state-focus {
    border: none;
    outline: none;
}

.ui-state-active {
    border: none;
    outline: none;
}

如果jqueryui选项卡覆盖

UI状态active

，就足够了

更新：在您的情况下，这不是ui状态活动类，而是webkit中的常规锚定大纲。我已更新了您的小提琴：

快速解决方案： 如果要影响实际的.ui元素，请选择解决方案。

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

Anon和Konstantin D的答案有什么区别？

Anon正确地瞄准了“li标签”中的实际“a标签” 永远记住，那就是标签（）；在未排序列表中使用“a标记”。以实际显示导航选项卡

例子： CSS也会影响li:a标签上的轮廓

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

启动jQuery UI选项卡小部件

$('#my-tabs').tabs();

选项卡HTML标记

<div id="my-tabs">
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 1</a></li>
    </ul>
    <div id="tab-1"></div>
    <div id="tab-2"></div>
</div>

我喜欢丹尼尔的解决方案，我只想在其中添加以下内容：

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

---

.ui状态访问了一个

&

.ui状态焦点a

当您单击另一个选项卡时停止显示大纲/鼠标离开悬停区域

我的答案是上述所有答案的混合使用以下简单和简短

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

---

接受的答案在Firefox中有效，但我在Mac上的Chrome中遇到了问题。
“大纲样式”属性似乎为我解决了这个问题

.ui-state-focus {
        outline-style:none;
    }

---

如果上述解决方案仍然不起作用，则这是由

框阴影

属性引起的。试试这个：

.ui-state-focus:focus, .ui-state-focus, li a {
    box-shadow:none;
}

我也面临同样的问题。 jQuery mobile在运行时应用类，我尝试了上述解决方案，但对我无效，然后我删除了ui阴影类表单

---

这满足了我的要求。

这是您的浏览器的行为，与css无关，请在中打开检查firefox@rajeshkakawatfirefox不显示大纲，但ie和chrome会显示。下面是一个从css选项卡中删除li{outline color:transparent；}的示例，以查看chrome或IET中的差异这在ie9或chrome中似乎不起作用，这是针对哪个浏览器的？所有浏览器。只需确保在包含jQueryUICSS之后覆盖它，而不是之前。您可以在jQueryUI的css中找到它。在调试版本中，每个组件的部分都用注释隔开。我试过了，但似乎没有什么不同，也许它需要！重要的，或者可能是关于jsfiddle的某些东西阻止了它的工作，请看一看，我认为“outline:none；”是造成差异的原因，您不需要“border:none；”，删除它在chrome@axrwkr可能吧。为了jQueryUI类，如果视觉效果来自边界，我将其放在下面。事实上不是。嗨@jsh，谢谢你添加这个。我从未在Mac上测试过这一点。对于jQueryUI范围，我使用了

.ui状态焦点a{outline color:transparent}