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>

Answer 2

尽可能多的表单元素，按钮元素在浏览器中有不同的渲染，并且需要修复很多...

来自F. Verschelde的

http://fvsch.com/code/button-css/ 应该让你勾勒出整个元素周围的按钮而不是它的内容。

CSS概述最佳实践

2 个答案: