CSS :focus Selector
Select and style an input field when it gets focus:
More "Try it Yourself" examples below.
Definition and Usage
:focus selector is used to select the element that has focus.
Tip: The :focus selector is allowed on elements that accept keyboard events or other user inputs.
The numbers in the table specifies the first browser version that fully supports the selector.
When an <input type="text"> gets focus, gradually change the width from 100px to 250px:
transition: ease-in-out, width .35s ease-in-out;
CSS tutorial: CSS Pseudo classes