Matches an element when that element accepts focus from the user. Can be element-specific, or styled globally if no element is defined. A common technique in CSS resets is to set the outline property of all elements to 0 using focus, thereby eliminating the user agent’s default outline around focused elements. This practice is harmful to usability. If default outline styling is removed, it should be replaced with an equally noticeable style, as some users rely on this styling for interaction.
Syntax
To write a focus selector that is element specific, start with the desired element (which can contain class, IDs, or even attribute selectors), and follow that with a colon (:) and then focus, with no whitespace. The selector :focus would apply to all elements.
input:focus {
border: 1px solid red;
}