Purposes

By default, an outline will surround an clickable element when that element is in focus on a web page. Sometimes these outlines are turned off as they don’t match with the design. However, this may be a wrong way as many users will navigate the page with the keyboard instead of their mouse!

This article shows the CSS code to handle these outlines in a better way. The code is made reference to Kevin Powell’s video here.

/* For anchor tags */
a: hover {
    opacity: 0.7;
}

a:focus {
    outline: 1px solid #color1;
    outline-offset: 5px;
}

/* For buttons  */
button:focus {
    box-shadow: 
        0 0 0 5px #gap-color, 
        0 0 0 10px #color1;
}

::-moz-focus-inner {
    border: 0;  /* firefox - remove the outline around the button text */
}

input:focus, textarea:focus, select:focus{
    outline: none;
}

/*  Or */
*:focus{
    outline: none;
}