【问题标题】：jQuery UI - remove orange tab border on focusjQuery UI - 删除焦点上的橙色标签边框
【发布时间】：2012-11-30 01:48:51
【问题描述】：

我正在尝试删除此边框：

因为它只显示在焦点上，所以我无法使用 chrome 控制台找到要覆盖的类。

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

编辑：我想这是标准行为，here 你可以看到这个例子。我也在用 Chrome。

【问题讨论】：

这是您浏览器的行为与 css 无关，请在 firefox 中打开检查
@rajeshkakawat firefox 不显示轮廓，但 ie 和 chrome 可以。这是一个例子jsfiddle.net/axrwkr/4F6z6 remove li a { outline-color: transparent; } 从 css 选项卡中查看 chrome 或 ie 的区别

标签： jquery jquery-ui tabs focus border

【解决方案1】：

li a
{
    outline-color: transparent;
}

【讨论】：

对于 jquery-ui 范围我使用了.ui-state-focus a {outline-color:transparent}

【解决方案2】：

快速解决方案：

如果要影响实际 .ui 元素的解决方案。

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

Anon 和 Konstantin D 的回答有何不同？

Anon 正确地定位了“li 标签”中的实际“a 标签”。永远记住，那个 tabs();在未排序的列表中使用“a tags”。实际显示标签导航。

示例：

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>

【讨论】：

【解决方案3】：

我喜欢 Daniel 的解决方案，我只是将其添加到其中：

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

.ui-state-visited a 和 .ui-state-focus a 在您单击其他选项卡/鼠标离开悬停区域时停止显示大纲

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您可以覆盖 ui-state-focus 和 ui-state-active css 类。

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

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

对于 jQuery UI 选项卡，覆盖 ui-state-active 就足够了。

更新：在您的情况下，这不是 ui-state-active 类，而是 webkit 中的常规锚大纲。我更新了你的小提琴：http://jsfiddle.net/ukPW6/4/

【讨论】：

这在ie9或chrome中好像不行，这是给哪个浏览器的？
所有浏览器。只需确保在包含 jQuery UI css 之后覆盖它，而不是之前。您可以在 jQuery-UI 的 css 中找到它。每个组件的部分在调试版本中用注释分隔。
我试过了，但似乎没有什么不同，也许它需要 !important 或者关于 jsfiddle 的某些东西阻止它工作，看看jsfiddle.net/axrwkr/ukPW6
我认为“大纲：无；”是什么有所不同，你不需要“border：none;”，删除它对chrome没有任何影响
@axrwkr 可能是的。如果视觉来自边框，我把它放在 jQuery UI 类中。事实上不是。

【解决方案6】：

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

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

【讨论】：

嗨@jsh，感谢您添加此内容。我从来没有在 Mac 上进行过测试。

【解决方案7】：

如果上述解决方案仍然不起作用，则它是由box-shadow 属性引起的。试试这个：

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

【讨论】：

【解决方案8】：

我遇到了同样的问题。 jQuery mobile 在运行时应用类，我尝试了上述解决方案，但它对我不起作用，然后我删除了 ui-shadow 类表单<div data-role="navbar" class="ui-corner-all"> 这满足了我的要求。

【讨论】：