5

谢谢大家。这是一个非常好的讨论，为我澄清了很多。

我正在处理输入字段并想删除大纲，但人们说这是一种不好的做法。我不明白为什么。毕竟，不同的浏览器有不同的轮廓，这就摆脱了统一性。

无大纲：

form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea {
  color: #000 !important;
  border: 2px solid #bdc3c7;
  border-radius: 6px;
  padding: 7px 13px; 
}
  form input[type="text"]:focus,
  form input[type="email"]:focus,
  form input[type="password"]:focus,
  form textarea:focus {
  outline: none; }

我的想法是，为了提高一致性，最好去掉轮廓，但我想有些人会争论可访问性。我仍然可以为可访问性添加边框或框阴影，这将有助于网站在所有浏览器中看起来一致：

form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea {
  color: #000 !important;
  border: 2px solid #bdc3c7;
  border-radius: 6px;
  padding: 7px 13px; 
}
  form input[type="text"]:focus,
  form input[type="email"]:focus,
  form input[type="password"]:focus,
  form textarea:focus {
  /* IMPORTANT */ box-shadow: 0px 0px 2pt 2pt #008bd1;
  outline: none; }

所以我仍然不明白概述的论点：没有一个是不好的做法。

看到这个：http: //jsfiddle.net/bCGZQ/

编辑：两个答案都很好，但由于第一个引发的辩论，我会接受它。

4

2 回答 2

9

Outline 在很大程度上是一种辅助功能，应该在可选项卡元素上可用，以在键盘导航期间指示焦点。

在使用 TAB 键（或等效键）导航 Web 文档时，它为具有“焦点”的链接提供视觉反馈。这对于不能使用鼠标或有视力障碍的人特别有用。如果您删除大纲，您将使这些人无法访问您的网站。

http://www.outlinenone.com

于 2013-10-18T17:31:46.833 回答
6

设置outline:none;还不错。

没有:focus风格是不好的。

如果您删除（通常默认提供）outline，请确保border在聚焦交互式元素时设置替代样式（例如）。当然，替代方案必须是可访问的，这可能是也可能不是box-shadow（检查对比度，考虑色盲，检查访问者是否支持它等）。

简单的测试方法：使用Tab页面上的键。您应该始终能够看到您当前关注的内容。如果这种特定样式具有足够高的对比度，不只依赖于颜色，并且被访问者的浏览器支持，那就没问题了。

于 2013-10-18T22:38:38.190 回答