我有一个汉堡菜单按钮，可通过 TAB 选择。当我单击它并打开菜单时，汉堡有这个蓝色轮廓，以清楚地表明它是集中的。 我不想删除那个蓝色轮廓，因为它可以帮助视力受损的人，并且对于选项卡选择它也很棒，但是只有当有人通过鼠标单击蓝色轮廓时，有没有一种聪明的方法可以删除蓝色轮廓。只是美学......
感谢您的回答。
干杯
【问题讨论】：
标签： css focus accessibility selection outline
正如您所指出的，此处的蓝色轮廓是出于可访问性的原因。
如果您单击元素，键盘焦点也会移动到该元素。
因此用户必须知道键盘焦点已移至该元素。
一些残障人士可能希望使用鼠标跳转到特定选项卡，然后出于方便的原因使用键盘。
【讨论】：
js：
$('#element').click(function(){
$(this).addClass('mouse');
});
$('#element').blur(function(){
if($(this).hasClass('mouse'){
$(this).removeClass('mouse');
}
});
css：
.mouse{
outline: none;
}
【讨论】：
如果我对问题的理解正确，请尝试：
.myButton:active {outline: none;}
【讨论】：
这是一个简单的解决方案，使用纯 Javascript，可以追溯到 IE 10。
这个答案类似于@kuba 的答案。使用 JS 添加/删除类以检测鼠标单击或选项卡按钮按下。
javascript：
var htmlElement = document.querySelector('html');
document.addEventListener('click', function(){
htmlElement.classList.add('clicking');
});
document.addEventListener('keyup', function(e){
if (e.keyCode === 9) {
htmlElement.classList.remove('clicking');
}
});
然后在点击类存在时关闭 :focus 上的轮廓
CSS：
html.clicking .targetElement:focus {
outline: none;
}
/*
or you can try dealing with all visibly focusable elements from the start. I'm not sure if this is all of them, but it's good starting point.
*/
html.clicking a:focus,
html.clicking button:focus,
html.clicking input:focus,
html.clicking textarea:focus {
outline: none;
}
浏览器兼容性：
querySelector IE 8+
element.classList IE 10+
如果您需要支持早于 IE10 的浏览器，可以使用 jQuery。
$(document).on('click', function(){
$('html').addClass('clicking');
});
$(document).on('keyup', function(){
if (e.keyCode === 9) {
$('html').removeClass('clicking');
}
});
【讨论】：
你可能想这样做：
div:active, div:focus{
outline: none;
border: none;
}
也许：
*{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
【讨论】：