Question

我有一个汉堡菜单按钮，可通过TAB选择。当我点击它并打开菜单时，汉堡有这个蓝色轮廓，以表明它是聚焦的。我不想删除那个蓝色轮廓，因为它有助于视障人士和标签选择它也很棒，但只有当有人通过鼠标点击蓝色轮廓时才有一种聪明的方法来删除蓝色轮廓。只是美学......

感谢您的回答。

欢呼声

Answer 1

如果我正确理解了这个问题，请尝试：

.myButton:active {outline: none;}

Answer 2

<强> JS ：

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

<强> CSS ：

.mouse{
  outline: none;
}

Answer 3

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

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

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

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

Answer 4

这是一个简单的解决方案，在简单的Javascript中，可以回到IE 10.

这个答案类似于@ kuba的回答。使用JS添加/删除类以检测鼠标单击或按Tab键按钮。

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

然后关闭轮廓：点击类存在时焦点

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 +

jQuery替代方案，如果您需要支持早于IE10的浏览器。

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

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

Answer 5

你可能想这样做：

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

并且可能：

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

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

5 个答案: