CSS轮廓线最佳实践

Question

关于以下做法，存在一些争议：

a, input, textarea, button {
    outline: none;
}

无障碍问题是一个普遍关注的问题。

我的意图不是完全删除这个功能（如上面的代码所示）；然而，这个功能通过在不需要的区域添加意外的边框（嗯，轮廓？）大大干扰了我的原始设计。

主要问题在于这些轮廓实际上遵循元素周围的矩形区域，而不是它的轮廓（即它忽略了边框半径等）。

例如：

div {
    margin: 64px;
}

input {
    font-size: 20px;
    border-radius: 16px;
    border: 2px solid #CCC;
    padding: 2px 12px;
}

button {
    font-size: 20px;
    border-radius: 32px;
    text-transform: uppercase;
    color: #FFF;
    border: 2px solid #CCC;
    background: #CCC;
    padding: 6px 3px;
    cursor: pointer;
}

<div>
    <input type="text" placemark="Search query..."/>
    <button>Go</button>
</div>

我所知道的唯一解决方案是运行上述代码并使用自己的系统。

采取这种方法时，有哪些最佳实践？

- Christian

Answer 1

确实。轮廓是围绕边框外部的矩形区域。它不考虑圆角。

禁用轮廓没有问题，只要您为使用键盘的人添加其他可访问性功能即可，例如，在焦点上更改背景颜色：

div {
    margin: 64px;
}

input {
    font-size: 20px;
    border-radius: 16px;
    border: 2px solid #CCC;
    padding: 2px 12px;
    outline: 0;
}

button {
    font-size: 20px;
    border-radius: 32px;
    text-transform: uppercase;
    color: #FFF;
    border: 2px solid #CCC;
    background: #CCC;
    padding: 6px 3px;
    cursor: pointer;
}
input:focus {
    border-color: #999;
}

<div>
    <input type="text" placemark="Search query..."/>
    <button>Go</button>
</div>

- Madara's Ghost

---

+1 - 但是有一个注意事项，确保你的替换足够显眼。将浅灰色边框替换为略深的边框可能会让一些人难以区分。虽然您可以看到颜色的变化，但一旦控件获得焦点（在此示例中），它看起来并不“聚焦”。因此，您需要考虑整体页面设计，以便在整个页面/站点提供一致的聚焦样式，并且当前聚焦的项目在视觉上明显，并且与非聚焦项目有足够显著的区别。 - BrendanMcK

确实，这只是一个例子，但是是的，你应该让更改明显@ChristianSciberras。 - Madara's Ghost

Answer 2

像许多表单元素一样，按钮元素在不同的浏览器中有不同的呈现方式，因此需要进行许多修复...

http://fvsch.com/code/button-css/ F. Verschelde的解决方案可以让您在整个元素周围而不是其内容周围勾勒出按钮。

- FelipeAls