jQuery UI - 移除焦点上的橙色标签边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13838377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI - remove orange tab border on focus
提问by gotqn
I am trying to remove this border:
我正在尝试删除此边框：
and since it shown only on focus I am not able to find which class to overwrite using the chrome console.
并且由于它仅显示焦点，因此我无法使用 chrome 控制台找到要覆盖的类。
Has anyone done this and knew what is the class that I should overwrite?
有没有人做过这个并且知道我应该覆盖什么类？
Edit: I suppose this is the standard behaviour and hereyou can see the example. I am also using Chrome.
编辑：我想这是标准行为，在这里您可以看到示例。我也在使用 Chrome。
回答by
li a
{
outline-color: transparent;
}?
回答by Daniel H. Hemmingsen
QUICK SOLUTION:
快速解决方案：
The solution if you want to affect the actual .ui element.
如果你想影响实际的 .ui 元素，解决方案。
.ui-state-active a, .ui-state-hover a {
outline: none;
}
What the difference was between Anon and Konstantin D's answer?
Anon 和 Konstantin D 的回答有什么区别？
Anon rightfully targeted the actual "a tag" inside the "li tag." Always remember, that tabs(); uses "a tags" inside unsorted list. To actually display the tabs navigation.
Anon 正确地定位了“li 标签”中的实际“a 标签”。永远记住，tabs(); 在未排序列表中使用“a 标签”。实际显示选项卡导航。
EXAMPLE:
例子：
CSS too affect the outline on li:a tags
CSS 也会影响 li:a 标签的轮廓
.ui-state-active a, .ui-state-hover a {
outline: none;
}
Fire the jQuery UI Tabs widget
触发 jQuery UI Tabs 小部件
$('#my-tabs').tabs();
Tabs Markup in HTML
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>
回答by Pixelomo
I like Daniel's solution, I'd just add this to it:
我喜欢 Daniel 的解决方案，我只需将其添加到其中：
.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a {
outline: none;
}
the .ui-state-visited a& .ui-state-focus astop it showing the outlining when you click a different tab/ your mouse leaves the hover area
当您单击不同的选项卡/鼠标离开悬停区域时，.ui-state-visited a&.ui-state-focus a停止显示轮廓
回答by anonymous
My answer is mix of all above answers simple and short use the following
我的答案是以上所有答案的混合简单和简短使用以下
.ui-tabs .ui-tabs-nav li a {
outline:none;
}
回答by jsh
accepted answer works in Firefox but I had trouble with it in Chrome on a Mac.
the outline-style attribute seemed to solve this for me.
接受的答案在 Firefox 中有效，但我在 Mac 上的 Chrome 中遇到了问题。
大纲样式属性似乎为我解决了这个问题。
.ui-state-focus {
outline-style:none;
}
回答by Konstantin Dinev
You can override the ui-state-focusand ui-state-activecss classes.
您可以覆盖ui-state-focus和ui-state-activecss 类。
.ui-state-focus {
border: none;
outline: none;
}
.ui-state-active {
border: none;
outline: none;
}
In the case of jQuery UI Tabsoverriding ui-state-activeshould be sufficient.
在jQuery UI 标签覆盖的情况下ui-state-active应该就足够了。
Update: In your case this is not the ui-state-active class but rather the regular anchor outline in webkit. I have updated your fiddle: http://jsfiddle.net/ukPW6/4/
更新：在您的情况下，这不是 ui-state-active 类，而是 webkit 中的常规锚点轮廓。我已经更新了你的小提琴：http: //jsfiddle.net/ukPW6/4/
回答by Ari
If the solutions above still not working, then it is caused by box-shadowproperty. Try this:
如果上述解决方案仍然不起作用，则是由box-shadow属性引起的。尝试这个：
.ui-state-focus:focus, .ui-state-focus, li a {
box-shadow:none;
}
回答by Rudresh Bhatt
I was facing same problem.
jQuery mobile applies classes at runtime, I tried above solutions but it didn't worked for me then I removed ui-shadowclass form <div data-role="navbar" class="ui-corner-all">That fulfilled my requirement.
我面临同样的问题。jQuery mobile 在运行时应用类，我尝试了上述解决方案，但它对我不起作用，然后我删除了ui-shadow类表单，<div data-role="navbar" class="ui-corner-all">这满足了我的要求。
