Removing outlines from CSS links

In CSS, links can have several states, including a normal state, a visited state, an hover state, a focus state and an active state. Each of these states depends on the user interaction with links. When a user moves the pointer on a link, the hover state is triggered. Conversely, when such a user clicks on a link or activate it using the keyboard, the active state is triggered. And so on. Normally, browsers apply their default style rules only to the normal and visited states, that is, a:link and a:visited. The classical styles for such states are a blue color for the normal state and a purple color for the visited state, plus a text decoration. But there are browsers that may apply other styles to other link states.

Firefox, for example, applies an outline style to the focus state of each link. To reset this behavior, simply write:

a:focus {
 outline-style: none;
}

Outlines are also applied by browsers to other page elements, such as form controls. To reset this behavior, do the same thing as above.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.