单击时删除链接上的蓝色轮廓，但保留TAB选择（辅助功能）的轮廓

Question

我有一个汉堡菜单按钮，可通过选项卡进行选择。当我点击它并且菜单打开时，汉堡有这个蓝色的轮廓，以表明它是重点。 我不想删除蓝色轮廓，因为它可以帮助视力受损的人以及选项卡选择，它也很棒，但是有一种巧妙的方式可以在人们通过鼠标点击蓝色轮廓时移除蓝色轮廓。只是美学...

感谢您的回答。

欢呼

Answer 1

那么你可能需要做这种方式：

div:active, div:focus{ 
    outline: none; 
    border: none; 
} 

，也许：

*{ 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 
} 

Answer 2

如果我理解正确的问题，请尝试：

.myButton:active {outline: none;}

Answer 3

JS：

$('#element').click(function(){ 
    $(this).addClass('mouse'); 
}); 
$('#element').blur(function(){ 
    if($(this).hasClass('mouse'){ 
    $(this).removeClass('mouse'); 
    } 
}); 

CSS：

.mouse{ 
    outline: none; 
} 

Answer 4

正如你所指出的，蓝色的轮廓在这里的可访问性的原因。

如果您单击该元素，键盘焦点也将移动到该元素。

因此，用户必须知道键盘焦点已移至该元素。

有些残疾人士可能希望使用鼠标跳到某个特定标签，但出于便利原因使用键盘。

Answer 5

这里有一个简单的解决方案，以纯JavaScript，这些作品回到IE 10

这个答案是类似于@库巴的答案。使用JS添加/删除类来检测鼠标点击或按下标签按钮。

的javascript：当点击类存在

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+

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'); 
    } 
}); 

然后关闭轮廓上 ​​IE 10+

jQuery替代方案，如果您需要支持比IE10更老的浏览器。

$(document).on('click', function(){ 
    $('html').addClass('clicking'); 
}); 

$(document).on('keyup', function(){ 
    if (e.keyCode === 9) { 
    $('html').removeClass('clicking'); 
    } 
});