The focus style: aesthetics and accessibility in web design

*:focus{outline:none!important}

This CSS rule (the stylesheet that defines how a website looks) changes the default behaviour of browsers when you navigate using the keyboard. Normally, when you reach a link or a button, the browser draws an outline there: it marks where the user is at every moment. Often this outline clashes with the design and breaks visual cohesion. With this rule we remove it and gain full control over the appearance of focused elements.

That said, there is a limit we should not lose sight of: people who navigate the web using only the keyboard, due to physical limitations or by preference. If you remove their visual marker without providing another one, they won't know where they are. Before removing it, decide how you will indicate focus in another way.

If you use WordPress, you can inject the code with a snippets plugin (the same approach I explain in How to remove items from the WordPress admin menu with Code Snippets):

<?php
function quitar_foco_con_css() {
    echo '<style type="text/css">
        *:focus{outline:none!important}
    </style>';
}

add_action('wp_footer', 'quitar_foco_con_css');

And if you want another aesthetic and user experience improvement, here's how to add a day/night mode toggle button.