Bootstrap的Togglable选项卡 - 删除大纲/焦点？

我正在使用从Twitters Bootstrap的Bootstrap的Togglable选项卡 - 删除大纲/焦点？

我有问题，即使你也可以从示例中看到。当用户单击该选项卡时，活动选项卡周围有虚线边框。

我使用的问题，火狐11截图：

enter image description here

我期待摆脱虚线边框的。有谁知道你是如何做到这一点的？

.nav-tabs > .active > a, .nav-tabs > .active > a:hover { 
    outline:none; 
}

虽然我建议你把它留在，因为它的存在在一定程度上帮助残疾人和屏幕的人：

感谢

来源

2012-03-20 StuBlackett

什么虚线边框？我只能看到一行（可视化标识所选标签）。你使用的是什么浏览器？ – 2012-03-20 15:41:14

我没有看到任何虚线边框。它看起来很稳固 – DG3 2012-03-20 15:41:45

@burhan我正在使用FireFox v11 – StuBlackett 2012-03-20 15:43:01

尝试在链接元素上使用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; 
}

来源

2012-03-20 15:45:16 Tim

那就是那个。以前从未使用过CSS的轮廓。这也会跨浏览器呢？ – StuBlackett 2012-03-20 15:47:48

line nr是在nonminified文件和Bootstrap v2.0.2 – Tim 2012-03-20 15:48:57

我认为这是一个Firefox的东西。虚线可能不会在其他浏览器中显示。 – Tim 2012-03-20 15:49:55

你指的是外形，您可以按以下方式删除它读者会正确显示您的内容，因此您将通过删除它来影响可用性。

来源

2012-03-20 15:45:04

这是正确的，非常重要。如果您删除大纲属性，则必须将其替换为另一种样式：关注链接和交互式元素。不能（或者不愿意）用鼠标导航页面的用户需要可视指示哪个元素当前处于焦点。这是一个可访问性要求。 – Marcus 2013-02-12 20:02:15

要解决此问题Firefox和其他浏览器，我可以使用下面的CSS：

/* Remove dotted outline from image inputs */ 
input::-moz-focus-inner { 
    border: 0; 
} 

/* Remove dotted outline from all links */ 
a { 
outline: 0; 
}

来源

2012-03-20 16:03:08

，重点边境是一个辅助功能。通过删除它，您正在阻止某些人访问您的网站。有些人指的是残疾人。

This video有助于明白我的观点（他有行动障碍）。（Here's it forwarded当他在去除边框鲤鱼来。）

来源

2014-05-03 14:04:37 Merovex

最简单的方法，如果你从少编译你的CSS，删除此代码到您的减档

.tab-focus() { 
    outline: 0; 
}

就是这样。

来源

2014-05-13 21:45:03 thednp

使用以下网页上的CSS：

html * { 
    outline: 0 !important; 
}

来源

2014-08-01 19:01:19 user3900576

“禁用”类或国家本身不是辅助设备。

我不知道信息来自哪里，但它是完全错误的。 'Disabled'是STATE其中按钮或锚点是未启用。意思是用户不能点击它。或者，点击它不会触发任何操作。使用此标签，残疾人不会受到任何影响。 BTW-我是非盈利的网络开发者/设计者，为残障人士提供支持和服务，并在各种设备上测试我的网页，包括屏幕阅读器和其他辅助设备。

焦点选项卡的类为.focus，活动选项卡的类为.active。

针对辅助功能的设计至关重要，因此请务必使用符合W3C标准的验证程序（如https://validator.w3.org/）检查您的代码。偶尔，我不得不通过JavaScript手动控制网站标签页或标签的顺序，但通常Bootstrap处理得很好。

示例： 我一直使用.disabled类为web窗体。我的“提交”按钮被禁用，直到所有必填字段都包含正确的信息。然后，只需删除.disabled类，并允许他们提交。

也就是说，你的做需要包括辅助设备的焦点/悬停项目的边界。这使用户能够跟踪他们在您的网站上“悬停”的内容。如上所述，您可以对其进行重新调整以更好地适应您的设计或其他方面，但请确保您有指示重点的内容。

如果有人有反击信息，我会有兴趣阅读它。

来源

2016-01-26 16:05:05

您可以使用下面的示例;）

.nav > li > a { 
    outline:none; 
}

来源

2016-04-21 11:22:36

Bootstrap的Togglable选项卡 - 删除大纲/焦点？

回答

相关问题