how to use :focus

 The browser uses the outline CSS property in its default style sheet to add the :focus styles to focused elements. In order to remove that and add your own :focus styles, all you have to do is add outline: 0; to the element whose :focus style you want to change, and then add your own. For example:

a:focus {
    outline: 0;
    /* then add your own styles here */
}
                

Outlines are similar to borders, but they’re not quite the same. You can read more about outlines and how they differ from borders in the outline property entry.

When you’re styling links using :focus it is recommended that you provide the :focus styles after :link and :visited styles, otherwise the :focus styles would be overridden by those of :link and :visited. In addition to these three pseudo-classes, the :hover and :active pseudo-classes are also used to style links, and they come after :focus in the style sheet. The order mentioned is preferred to make sure that each pseudo-class’s styles get applied when necessary and are not overridden by the styles of another pseudo-class.

The following snippet replaces the browser’s default :focus outline style for links with a background and text color that make the links stand out when they are focused.

a:link {
    color: #0099cc;
}

a:visited {
    color: grey;
}

a:focus {
    background-color: black;
    color: white;
}

a:hover {
    border-bottom: 1px solid #0099cc;
}

a:active {
    background-color: #0099cc;
    color: white;
}