:focus
Matches the element that currently has focus: a field being typed into, a button selected with Tab.
Syntax
selector:focus { … }Examples
The active field gets a blue border:
<style>
input { padding: 6px; border: 2px solid lightgray; outline: none; }
input:focus { border-color: royalblue; }
</style>
<input placeholder="Click here">
<input placeholder="Or here">Notes
Never remove the focus outline without a replacement — keyboard users would not see where they are. For buttons and links, :focus-visible is usually better: it does not show the outline after a mouse click. To style a parent when something inside it has focus, use :focus-within.
See also
- :focus-visible — Matches a focused element when the browser decides the focus should be visible — usually after keyboard navigation.
- outline — An outline around the element that takes no space and does not shift neighbors.
- :hover — Matches an element while the mouse pointer is over it.
Related recipes
In the tutorial
- Pseudo-classes — Styles for element states and positions — hover, focus, links, first-child, nth-child, not and form fields.