jQuery Bootstrap 的可切换选项卡 - 删除轮廓/焦点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9789949/
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
Bootstrap's Togglable Tabs - Removing outline / focus ?
提问by StuBlackett
I am using Toggable Tabs from Twitters Bootstrap
我正在使用 Twitters Bootstrap 中的Toggable Tabs
The problem I have, Even you can see from the example too. That when the user clicks the tab, The active tab has the dotted border around it.
我遇到的问题，即使您也可以从示例中看到。当用户单击选项卡时，活动选项卡周围有虚线边框。
I am using Firefox 11. Screenshot of the issue:
我使用的是 Firefox 11。问题截图：
I am looking to get rid of that dotted border. Does anyone know how you do this?
我正在寻找摆脱那个虚线边框。有谁知道你是如何做到这一点的？
Thanks
谢谢
回答by Tim
try using outline: 0;on the link element. see css-tricks.com/removing-the-dotted-outline
尝试outline: 0;在链接元素上使用。请参阅css-tricks.com/removing-the-dotted-outline
//line 2576 of bootstrap.css
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
outline: 0;
color: #555555;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
回答by Andres Ilich
You mean the outline, you can remove it as follows:
您的意思是轮廓，您可以按如下方式将其删除：
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
outline:none;
}
Though i would suggest you leave it in, since it is there in part to help people with disabilities and screen readers display your content properly, so you would be affecting usability by removing it.
虽然我建议您保留它，因为它在一定程度上是为了帮助残障人士和屏幕阅读器正确显示您的内容，因此删除它会影响可用性。
回答by user3900576
Use following CSS on your page:
在您的页面上使用以下 CSS：
html * {
outline: 0 !important;
}
回答by Merovex
That focus border is an accessibility feature. By removing it, you are impeding some being able to access your site. By some, I mean people with disabilities.
该焦点边框是一个辅助功能。通过删除它，您将阻止某些人访问您的网站。有些人，我的意思是残疾人。
This videohelps get my point (he has a mobility disability). (Here's it forwardedto when he carps on removing the border.)
回答by Ricardo Vieira
You can use the sample below ;)
您可以使用下面的示例；)
.nav > li > a {
outline:none;
}
回答by Graham Swan
To solve the issue for Firefox and all other browsers, I would use the following CSS:
为了解决 Firefox 和所有其他浏览器的问题，我将使用以下 CSS：
/* Remove dotted outline from image inputs */
input::-moz-focus-inner {
border: 0;
}
/* Remove dotted outline from all links */
a {
outline: 0;
}
回答by thednp
The easiest way, if you compile your CSS from Less, drop this code into your less files
最简单的方法，如果你从 Less 编译你的 CSS，把这段代码放到你的 less 文件中
.tab-focus() {
outline: 0;
}
That's it.
就是这样。
回答by Dan Kaufman
The 'disabled' class or state itself is NOT for assistive devices.
“禁用”类或状态本身不适用于辅助设备。
I don't know where that information came from but it is completely false. 'Disabled' is a STATEwherein the button or anchor is NOT ENABLED. Meaning the user cannot click on it. Or, clicking it triggers no action. People with disabilities are not affected in any way by use of this tag. BTW- I am the web developer/designer for a non-profit that provides support and services to people with disabilities and I test my pages on a variety of devices, including screen readers and other assistive devices.
我不知道这些信息来自哪里，但它完全是错误的。“禁用”是一种状态，其中按钮或锚点未启用。这意味着用户无法点击它。或者，单击它不会触发任何操作。使用此标签不会对残疾人产生任何影响。顺便说一句 - 我是一家为残障人士提供支持和服务的非营利组织的网络开发人员/设计师，我在各种设备上测试我的页面，包括屏幕阅读器和其他辅助设备。
The class for a tab with focus is .focusand the class for the active tab is .active.
具有焦点的选项卡.focus的类是 ，活动选项卡的类是.active。
Designing for accessibility is crucial so always check your code with a W3C-compliant validator (like https://validator.w3.org/). Occasionally, I've had to manually control the tab or arrow order for tabs on a site via JavaScript but, generally, Bootstrap handles it pretty well.
设计可访问性至关重要，因此请始终使用符合 W3C 的验证器（如https://validator.w3.org/）检查您的代码。有时，我不得不通过 JavaScript 手动控制站点上选项卡的选项卡或箭头顺序，但通常，Bootstrap 处理得很好。
Example:I use the .disabledclass for web forms all the time. I have the Submit button disabled until all the required fields contain the proper information. Then, simply remove the .disabledclass and allow them to submit.
示例：我一直使用.disabledWeb 表单类。我禁用了提交按钮，直到所有必填字段都包含正确的信息。然后，只需删除.disabled该类并允许他们提交。
That said, you doneed to include a border on focused/hover items for assistive devices. This allows the user to be able to track what they are 'hovering' over on your site. As mentioned above, you can restyle it to better fit your design or whatever but make sure you have something to indicate focus.
也就是说，您确实需要在辅助设备的聚焦/悬停项目上包含边框。这使用户能够跟踪他们在您的网站上“悬停”的内容。如上所述，您可以重新设计它以更好地适应您的设计或其他任何东西，但请确保您有一些东西可以表明重点。
If anyone has countering info on this I'd be interested in reading it.
如果有人对此有反驳信息，我会感兴趣阅读。
