CSS :focus pseudo-class
- Previous Page :first-of-type
- Next Page :focus-visible
- Go to Parent Layer CSS Pseudo-class Reference Manual
Definition and usage
CSS :focus
Pseudo-classes are used to select and set the styles of focused elements.
Example
Example 1
Select and set the style for the input field when it gains focus:
input:focus { background-color: yellow; }
Example 2
Change the background color and width when the input field gains focus:
input:focus { background-color: yellow; width: 250px; }
CSS syntax
:focus { css declarations; }
Technical details
Version: | CSS2 |
---|
Browser support
The numbers in the table specify the first browser version to fully support the pseudo-class.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Related pages
Tutorial:CSS Pseudo-class
- Previous Page :first-of-type
- Next Page :focus-visible
- Go to Parent Layer CSS Pseudo-class Reference Manual