7

关于执行以下操作的做法存在一些争议：

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

可访问性问题是一个普遍关注的问题。

我不打算完全删除这个特性（就像上面的代码那样）；但是，此功能通过在不受欢迎的区域添加意外边框（erm，轮廓？），极大地混淆了我的原始设计。

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

例子：

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>

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

采用这种方法时的最佳实践是什么？

4

2 回答 2

9

确实。边框外部的矩形区域周围有一个轮廓。它不考虑圆角。

禁用轮廓并没有错，只需确保为使用键盘的人添加一些其他辅助功能，例如，更改焦点背景的颜色：

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>

于 2012-02-14T10:04:57.777 回答
0

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

来自 F. Verschelde 的http://fvsch.com/code/button-css/应该让您围绕整个元素而不是围绕其内容勾勒按钮。

于 2012-02-16T19:10:15.967 回答