css - CSS概述最佳做法

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

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>

我知道的唯一解决方案是让上面的代码运行并使用我自己的系统。
采取这种方法的最佳做法是什么？

最佳答案

的确。边框外部的矩形区域周围有一个轮廓。它不考虑圆角。
禁用大纲没有什么问题，只要确保为使用键盘的用户添加了一些其他辅助功能，例如，更改聚焦时的背景颜色：

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>

关于css - CSS概述最佳做法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9274948/