CSS :focus Pseudo Class
The :focus CSS pseudo-class selects the elements that are focused. Read about the pseudo-class and practice with examples.
The :focus pseudo-class selects and styles an element while it is focused — that is, while it is the element currently set to receive keyboard input.
Only one element on a page can hold focus at a time. Form controls such as <input>, <button>, <textarea>, and links can receive focus by tabbing with the keyboard or by clicking. Non-interactive elements (like a <div>) can also become focusable if you add a tabindex="0" attribute.
This page covers how :focus works, why you should almost never remove the focus indicator without a replacement, and the related :focus-visible and :focus-within pseudo-classes that solve common problems :focus alone cannot.
How focus styling works
When an element gains focus, the browser applies a default outline so keyboard users can see where they are. The :focus rule lets you override or enhance that indicator:
input:focus {
outline: 2px solid #2563eb;
background-color: #eef4ff;
}:focus is a dynamic pseudo-class: the styles apply only while the element is focused and are removed the moment focus moves elsewhere (for example, when the user tabs to the next field).
Accessibility Concerns
The visual focus indicator should be accessible to all users. According to WCAG 2.1 SC 2.4.7 Focus Visible, the focus indicator must be clearly visible and maintain a contrast ratio of at least 3:1 against adjacent colors.
A common mistake is to remove the outline entirely for a "cleaner" look:
/* Don't do this on its own — keyboard users lose all feedback */
:focus {
outline: none;
}If you remove the default outline, always replace it with a custom indicator (a visible border, box-shadow, or background change) that meets the 3:1 contrast requirement:
button:focus {
outline: none;
box-shadow: 0 0 0 3px #2563eb;
}:focus vs :focus-visible
Plain :focus triggers on both mouse clicks and keyboard tabbing. That means clicking a button can leave a focus ring sitting there after the click — visually noisy for mouse users, but essential for keyboard users.
The :focus-visible pseudo-class solves this: the browser only matches it when it decides a visible indicator is genuinely useful, typically keyboard navigation. The recommended pattern is to keep a subtle hint for everyone and a strong ring only for :focus-visible:
button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}:focus-within
:focus-within matches an element when it or any of its descendants is focused. It is handy for highlighting a whole form group, card, or dropdown when one of its inputs is active:
.field:focus-within {
border-color: #2563eb;
}Version
Syntax
CSS :focus syntax example
:focus {
css declarations;
}Example of the :focus selector:
CSS :focus code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:focus {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
Name:
<input type="text" name="name" /> Surname:
<input type="text" name="surname" />
</form>
</body>
</html>Example of the :focus selector with the <label> tag:
CSS :focus another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[type=text] {
width: 100px;
transition: width .2s ease-in-out;
}
input[type=text]:focus {
width: 150px;
background-color: #eee;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
<label for="search">Search:</label>
<input type="text" name="search" id="search" />
</form>
</body>
</html>Related pseudo-classes
:focus is one of several dynamic pseudo-classes that respond to user interaction. Explore the others:
:hover— styles an element while the pointer is over it.:active— styles an element while it is being activated (the moment of a click).outline— the property most often used to build a custom focus indicator.