Abakada: Back to Basics > Language References > CSS Properties > Pseudo-Classes > focus Pseudo-class

---

Represents an element (such as a form input) that is currently in focus.

selector:focus { property: value; }

property	Any valid CSS property.
value	Any of the range of values available to the corresponding property.

The :focus pseudo-class applies styles to the element that is currently in focus.

The style(s) are applied when the user clicks or taps on an element, or selects it with the keyboard’s Tab key.

The syntax for using the :focus pseudo-class is straightforward. A selector immediately precedes the pseudo-class.

For example, to change the style of an anchor ( <a>) element that is in focus:

a:focus { background: maroon; color: gold;
   padding: 5; font-weight: bold; text-transform: uppercase }   

:focus is not limited to anchor elements. It can be used on any element that is focusable, or parts of a document that can become the target of keyboard or mouse input, including:

• <input> elements
• <select> elements
• <button> elements
• <area> elements that has an href attribute

The following demonstrates use of the :focus property in an embedded stylesheet to set styles for elements that are currently in focus on a page.

 Show me 

Notice in that example that when used with <a> elements, :focus behaves like :hover and :active when these properties are not set.

• 5.11.3. The dynamic pseudo-classes: :hover, :active, and :focus
• 9.3. The Input Focus Pseudo-class: :focus

:active   :hover   :link   :target   :visited