<!DOCTYPE html>
<html>
<head>
<style>
/* Apply styles to elements that receive focus only through the keyboard */
button:focus:not(:active) {
outline: 2px solid blue;
}
/* Apply styles to elements that receive focus through any means */
button:focus {
outline: none;
}
</style>
</head>
<body>
<button>Click me</button>
<script>
// Disable focus on mouse click
document.addEventListener('mousedown', function(event) {
if (event.detail > 1) {
return; // do nothing if double-clicked
}
const target = event.target;
const isButton = target.nodeName === 'BUTTON';
if (!isButton) {
return; // do nothing if not a button
}
event.preventDefault(); // prevent default mouse click behavior
});
</script>
</body>
</html>