当一个HTML元素被“聚焦”(当前选中/标签进入),许多浏览器(至少Safari和Chrome)会在它周围放一个蓝色边框。
对于我正在工作的布局,这是分散注意力,看起来不正确。
<input type="text" name="user" class="middle" id="user" tabindex="1" />
Firefox似乎没有这样做,或者至少,会让我控制它:
border: x;
如果有人能告诉我IE的表现如何,我会很好奇。
让Safari删除这一点闪光会很好。
在你这样做之前,请记住焦点轮廓是一个可访问性和可用性特性;它提示用户当前关注的元素是什么,许多用户依赖于它。你需要找到其他方法让焦点可见。
在你的情况下,试试:
input.middle:focus {
outline-width: 0;
}
或者一般来说,影响所有基本的形式元素:
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
在评论中,Noah Whitmore建议进一步支持将contentteditable属性设置为true的元素(有效地使它们成为一种输入元素)。以下也应该针对这些(在支持CSS3的浏览器中):
[contenteditable="true"]:focus {
outline: none;
}
虽然我不建议这样做,但为了完整性,你可以这样禁用所有的焦点轮廓:
*:focus {
outline: none;
}
: focus-visible
对可访问性的好消息- Chrome和Firefox增加了对
: focus-visible。
隐藏焦点样式是不好的做法,因为可访问性要求(键盘导航)会使你的网站更不容易访问。
使用:focus-visible伪类,并让浏览器决定何时应用焦点。
:focus-visible /* Chrome */
注意,Firefox通过一个旧的带前缀的伪类来支持类似的功能:
:-moz-focusring /* Firefox */
button {
color: #000;
background-color: #fff;
padding: 10px 16px;
margin: 10px 0;
border-radius: 4px;
}
button:focus {
box-shadow: 0 0 0 2px #E59700;
outline: 0;
}
button:hover {
background-color: #eee;
}
button.with-focus-visible:focus:not(:focus-visible) {
box-shadow: none;
outline: 0;
}
button.with-focus-visible:focus-visible,
button.with-focus-visible:moz-focusring {
box-shadow: 0 0 0 2px #E59700;
outline: 0;
}
<p>Click on the button using a mouse. Then try tabbing to the button.</p>
<button>without :focus-visible</button>
<button class="with-focus-visible">with :focus-visible</button>
文档:https://developer.mozilla.org/en-US/docs/Web/CSS/: focus-visible
w3规格:https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo
编辑2021:你现在可以使用这个:https://github.com/WICG/focus-visible
一般来说,删除所有焦点样式对可访问性和键盘用户都是不利的。但是轮廓是丑陋的,并且为每个交互元素提供自定义的焦点样式可能是一个真正的痛苦。
因此,我发现最好的折衷办法是,只有当我们检测到用户正在使用键盘导航时,才显示大纲样式。基本上,如果用户按TAB键,我们就会显示轮廓,如果用户使用鼠标,我们就会隐藏轮廓。
它不会阻止您为某些元素编写自定义焦点样式,但至少它提供了一个很好的默认值。
我是这样做的:
// detect keyboard users
const keyboardUserCssClass = "keyboardUser";
function setIsKeyboardUser(isKeyboard) {
const { body } = document;
if (isKeyboard) {
body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
} else {
body.classList.remove(keyboardUserCssClass);
}
}
// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
if (e.key === "Tab") {
setIsKeyboardUser(true);
}
});
document.addEventListener("click", e => {
// Pressing ENTER on buttons triggers a click event with coordinates to 0
setIsKeyboardUser(!e.screenX && !e.screenY);
});
document.addEventListener("mousedown", e => {
setIsKeyboardUser(false);
});
body:not(.keyboardUser) *:focus {
outline: none;
}
<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
<a href="#">This is anchor link</a>
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>