jQuery UI - 移除焦点时的橙色标签边框

Question

我正在尝试移除这个边框：

因为它只在焦点状态下出现，所以我无法通过 Chrome 控制台找到要覆盖的类。

有人做过这个并知道应该覆盖哪个类吗？

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

- gotqn

---

这是您的浏览器行为，与 CSS 无关，请通过在 Firefox 中打开进行检查。 - rajesh kakawat

@rajeshkakawat Firefox无法显示轮廓，但IE和Chrome可以。这是一个例子http://jsfiddle.net/axrwkr/4F6z6/，从CSS选项卡中删除li a {outline-color：transparent;}以查看Chrome或IE中的差异。 - user1873471

Answer 1

li a
{
    outline-color: transparent;
}​

- anon

---

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

Answer 2

快速解决方案：

如果您想影响实际的 .ui 元素，则需要以下解决方案。

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

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

Anon正确地针对了“li标签”内部的实际“a标签”。请牢记，tabs();使用未排序列表中的“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>

- Daniel H. Hemmingsen

Answer 3

我喜欢丹尼尔的解决方案，我只是想补充一下：

.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 可以阻止在您点击不同的标签或鼠标离开悬停区域时显示轮廓。

- Pixelomo

Answer 4

我的答案是综合以上所有答案的简单而简短的混合体，请使用以下方式：

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

- anonymous

Answer 5

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

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

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

针对 jQuery UI Tabs，覆盖 ui-state-active 应该足够了。 更新：在您的情况下，这不是 ui-state-active 类，而是 Webkit 中常规锚点轮廓。我已经更新了您的 fiddle：http://jsfiddle.net/ukPW6/4/。

- Konstantin Dinev

---

这在ie9或chrome中似乎不起作用，这是为哪个浏览器设计的？ - user1873471

所有的浏览器。确保在包含jQuery UI css之后覆盖它，而不是之前。您可以在jQuery-UI的css中找到它。每个组件的部分在调试版本中用注释分隔。 - Konstantin Dinev

我尝试过了，似乎没有什么区别，也许需要加上!important或者是jsfiddle的某些东西阻止了它的工作，请看一下http://jsfiddle.net/axrwkr/ukPW6/ - user1873471

我认为“outline: none;”是有区别的，你不需要“border: none;”，在Chrome中删除它并没有任何区别。 - user1873471

@axrwkr 可能是这样。我把它放在那里是为了 jQuery UI 类的缘故，如果视觉效果来自边框。实际上并不是这样的。 - Konstantin Dinev

Answer 6

接受的答案在Firefox中有效，但我在Mac上的Chrome浏览器中遇到了问题。
outline-style属性似乎为我解决了这个问题。

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

- jsh

---

嗨@jsh，感谢您添加这个。我从未有机会在Mac上测试过这个。 - gotqn

Answer 7

我曾经遇到过同样的问题。 jQuery mobile 在运行时应用类，我尝试了上面的解决方案，但对我没有起作用，然后我从 <div data-role="navbar" class="ui-corner-all"> 中删除了 ui-shadow 类。 这满足了我的需求。

- Rudresh Bhatt

Answer 8

如果以上解决方案仍然无效，则可能是由于box-shadow属性引起的。尝试这个：

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

- Ari