CSS :focus Pseudo Class

The :focus selects and styles the elements that are focused by the user.

Elements, such as <input>, <button>, and <textarea> can receive focus either by tabbing using the keyboard or by clicking.

Accessibility Concerns

The visual focus indicator should be accessible to all people. According to WCAG 2.1 SC 1.4.11 Non-Text Contrast, the visual focus indicator should be at least 3 to 1.

When removing the focus outline (visible focus indicator) always replace it with a focus outline that will pass WCAG 2.1 SC 1.4.11 Non-Text Contrast.

:focus {
  outline: none;
}

Version

CSS2 Spec

Selectors level 3

Selectors level 4

Syntax

:focus {
  css declarations;
}

Example of the :focus selector:

<!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>

Try it Yourself »

Example of the :focus selector with the <label> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[type=text] {
        width: 100px;
        -webkit-transition: width .2s ease-in-out;
        -moz-transition: width .2s ease-in-out;
        -o-transition: width .2s ease-in-out;
        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>