:focus is a pseudo-class used to select and style elements—usually links and form elements—that have been focused by the user, either by “tabbing” using the keyboard or by clicking.
Form elements, such as <input>s, <buttons>s, and <textareas>s can receive focus either by tabbing using the keyboard or by clicking. An input field or a textarea are in focus when they are clicked and ready to be typed in.
When the user tabs through links and form elements in a page, the browser usually adds a dotted outline around the element that is currently receiving the tab focus. The styles added by the browser are default to each browser and usually don’t look the same across browsers, so you may want to override the default styles and replace them with your own.
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.
Trivia & Notes
It’s very easy to remove the default :focus styles applied by the browser, but it’s also very important to add your own :focus styles after that for accessibility reasons.
Keyboard accessibility is very important and should be preserved, since many users prefer to navigate through a page using the keyboard. So, it is very important to always provide :focus styles.
Examples
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;
}
The following code snippet turns the background color of focused input and text area fields into a light highlight yellow color, with a light red border.
input:focus, textarea:focus {
background-color: #FFFF66;
border: 1px solid #F47E58;
}
Live Demo
Tab through page in the following demo using your keyboard, or click on the input and textarea fields to focus them and see the :focus styles.
Browser Support
The :focus pseudo-class is supported in all major browsers: Chrome, Firefox, Safari, Opera 7+, Internet Explorer 7+, and on Android and iOS.
