当用户“选中”输入时，我希望正常显示焦点效果，但点击后，我不希望它可见。
用户 点击标签，现在专注于切换按钮，我希望切换按钮有轻微的发光轮廓，我目前能够做到。
现在，
用户 点击 在切换按钮或其相关标签上，切换按常规更改， 但，我希望光芒永远不会出现在第一位，或者尽快消失。
我知道 .blur()，现在我不得不使用 setTimeout 对于一个懒惰的修复，但我想知道是否有更好的方法来实现这一点，或者是否有可能 CSS唯一解决方案
当用户“选中”输入时，我希望正常显示焦点效果，但点击后，我不希望它可见。
用户 点击标签，现在专注于切换按钮，我希望切换按钮有轻微的发光轮廓，我目前能够做到。
现在，
用户 点击 在切换按钮或其相关标签上，切换按常规更改， 但，我希望光芒永远不会出现在第一位，或者尽快消失。
我知道 .blur()，现在我不得不使用 setTimeout 对于一个懒惰的修复，但我想知道是否有更好的方法来实现这一点，或者是否有可能 CSS唯一解决方案
我认为很多前端开发人员都在努力寻求美学与可访问性最佳实践之间的平衡。这似乎是一个很大的妥协。
我就是这样做的。我们的想法是在用户使用Tab键时切换大纲，并在用户点击时将其关闭。
document.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
$('body').addClass('show-focus-outlines');
}
});
document.addEventListener('click', function(e) {
$('body').removeClass('show-focus-outlines');
});
body:not(.show-focus-outlines) button:focus,
body:not(.show-focus-outlines) [tabindex]:focus {
outline: none;
}
我认为很多前端开发人员都在努力寻求美学与可访问性最佳实践之间的平衡。这似乎是一个很大的妥协。
我就是这样做的。我们的想法是在用户使用Tab键时切换大纲，并在用户点击时将其关闭。
document.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
$('body').addClass('show-focus-outlines');
}
});
document.addEventListener('click', function(e) {
$('body').removeClass('show-focus-outlines');
});
body:not(.show-focus-outlines) button:focus,
body:not(.show-focus-outlines) [tabindex]:focus {
outline: none;
}
我现在正在为我的公司做类似的事情。不幸的是，您必须使用JavaScript，因为CSS不支持此用例。
这就是我所做的。
var btns = document.querySelectorAll('button');
var onMouseDown = function (evt) {
evt.target.dataset.pressed = 'true';
};
var onMouseUp = function (evt) {
evt.target.dataset.pressed = 'false';
};
var onFocus = function (evt) {
var element = evt.target;
if (element.dataset.pressed !== 'true') {
element.classList.add('focus');
}
};
var onBlur = function (evt) {
evt.target.classList.remove('focus');
};
for(var i = 0, l = btns.length; i < l; i++) {
btns[i].addEventListener('mousedown', onMouseDown);
btns[i].addEventListener('mouseup', onMouseUp);
btns[i].addEventListener('focus', onFocus);
btns[i].addEventListener('blur', onBlur);
}* { box-sizing: border-box; }
body { background-color: white; }
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-width: 100px;
margin: 0 1px;
padding: 12px 10px;
font-size: 15px;
color: white;
background-color: #646e7c;
border: none;
border-radius: 5px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
button:focus { outline: none; }
button:active {
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
transform: translateY(1px);
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
}
button.focus {
font-weight: bold;
}
button.primary { background-color: #2093d0; }
button.success { background-color: #71a842; }
button.danger { background-color: #ef4448; }<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button>Default</button>
<button class="primary">Primary</button>
<button class="success">Success</button>
<button class="danger">Danger</button>
</body>
</html>基本上，我没有依赖浏览器的原生焦点，而是添加/删除了一个 focus 我的按钮上的课程取决于具体情况。
如果你使用 什么-input.js 插件，您可以专门为键盘用户应用样式。您可以使用以下代码突出显示已选中的按钮。我发现什么输入是一个可靠的插件（与Zurb基金会捆绑在一起），目前定期维护。
// scss
body[data-whatinput="keyboard"] {
button {
&:focus {
// other highlight code here
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
}
}
要么
/* vanilla css */
body[data-whatinput="keyboard"] button:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}