Question

我正在使用Twitters Bootstrap

中的Toggable标签

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

我正在使用Firefox 11.问题的屏幕截图：

enter image description here

我希望摆脱虚线边框。有谁知道你是怎么做到的？

由于

Answer 1

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

Answer 2

您的意思是大纲，您可以按照以下方式将其删除：

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

虽然我建议你保留它，因为它部分是为了帮助残疾人和屏幕阅读器正确显示你的内容，所以你会通过删除它来影响可用性。

Answer 3

在您的网页上使用以下CSS：

html * {
    outline: 0 !important;
}

Answer 4

您可以使用以下示例;）

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

Answer 5

要解决Firefox和所有其他浏览器的问题，我会使用以下CSS：

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

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

Answer 6

该焦点边框是一种辅助功能。通过删除它，您阻碍了一些人能够访问您的网站。有些人，我指的是残疾人。

This video有助于明白我的观点（他有行动不便）。（Here's it forwarded当他car去除边界时。{/ p>

Answer 7

最简单的方法是，如果从Less编译CSS，请将此代码放入较少的文件

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

那就是它。

Answer 8

“禁用”类或州本身不适用于辅助设备。

我不知道这些信息来自哪里，但它完全是假的。 “已禁用”是 STATE ，其中按钮或锚点 NOT ENABLED 。意味着用户无法单击它。或者，单击它不会触发任何操作。残疾人不会因使用此标签而受到任何影响。 BTW-我是一个非营利组织的网站开发人员/设计师，为残障人士提供支持和服务，我在各种设备上测试我的网页，包括屏幕阅读器和其他辅助设备。

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

设计可访问性至关重要，因此请始终使用符合W3C的验证程序（如https://validator.w3.org/）检查代码。有时候，我不得不通过JavaScript手动控制网站标签的标签或箭头顺序，但一般情况下，Bootstrap可以很好地处理它。

示例：我一直使用.disabled类来表示Web表单。我禁用了“提交”按钮，直到所有必填字段都包含正确的信息。然后，只需删除.disabled类并允许它们提交。

那就是说，你做需要在聚焦/悬停项目上包含辅助设备的边框。这样，用户就可以跟踪他们在您网站上“悬停”的内容。如上所述，你可以重新设计它以更好地适应你的设计或其他任何东西，但要确保你有一些东西来表明焦点。

如果有人反对这方面的信息，我会有兴趣阅读它。

Bootstrap Togglable标签 - 删除轮廓/焦点？

8 个答案: