23

我正在尝试删除此边框：

在此处输入图像描述

并且由于它仅显示在焦点上，因此我无法使用 chrome 控制台找到要覆盖的类。

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

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

4

8 回答 8

51 
li a
{
    outline-color: transparent;
}​
于 2012-12-12T11:18:45.600 回答
11

快速解决方案：

如果你想影响实际的 .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>
于 2013-03-26T01:27:24.487 回答
10

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

.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鼠标离开悬停区域时，它会停止显示大纲

于 2013-07-03T17:21:37.903 回答
5

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

.ui-tabs .ui-tabs-nav li a { 
    outline:none;
}
于 2013-08-03T18:01:30.557 回答
1

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

.ui-state-focus {
        outline-style:none;
    }
于 2013-08-28T18:47:49.207 回答
1

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

.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/

于 2012-12-12T11:43:20.830 回答
0

如果上面的解决方案仍然不起作用，那么它是由box-shadow财产引起的。尝试这个：

.ui-state-focus:focus, .ui-state-focus, li a {
    box-shadow:none;
}
于 2015-09-14T06:14:29.877 回答
0

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

于 2016-06-16T11:21:34.420 回答