CSS :focus pseudo-class

Definition and usage

CSS :focus Pseudo-classes are used to select and set the style of focused elements.

Example

Example 1

Select and set the style for the input field when it gains focus:

input:focus {
  background-color: yellow;
}

Try it yourself

Example 2

Change the background color and width when the input field gains focus:

input:focus {
  background-color: yellow;
  width: 250px;
}

Try it yourself

CSS syntax

:focus {
  css declarations;
}

Technical details

Browser support

The numbers in the table specify the first browser version to fully support the pseudo-class.

Related pages

Manual:CSS pseudoklasse