Instantly share code, notes, and snippets.

Embed
What would you like to do?
outline style only for keyboard
<script>
// Let the document know when the mouse is being used
document.body.addEventListener('mousedown', function() {
document.body.classList.add('using-mouse');
});
document.body.addEventListener('keydown', function() {
document.body.classList.remove('using-mouse');
});
</script>
<style>
/* The default outline styling, for greatest accessibility. */
/* You can skip this to just use the browser's defaults. */
:focus {
outline: #08f auto 2px;
}
/* When mouse is detected, ALL focused elements have outline removed. */
/* You could apply this selector only to buttons, if you wanted. */
body.using-mouse :focus {
outline: none;
}
</style>
Source:
https://stackoverflow.com/a/51093815/1735394
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment