Source Code:
(back to article)
Submit
Result:
Report an issue
<!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>