:focus

The pseudo-class :focus is used to style elements that receive focus, either when the user selects it with the keyboard or when it is activated with the mouse.

 

The pseudo-class :focus specifies styles for an input, textarea, or link with input focus. The input focus is when the Input area is directly accessed.

Note: This pseudo-class only applies to the most focused element. Use :focus-within if you want to select the element containing the focused element.

Syntax

/* change background color when an input form has been focused on */

input:focus {
    background-color: #f3f3f3;
}

Example

<input value="focus on me">

input:focus {
     border: 2px dotted yellow;
     background-color: #f3f3f3;
}