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>

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

采用这种方法时最佳做法是什么？

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>