:focus CSS Pseudo Class

Description

The :focus pseudo-class defines a style for an element that receives focus. For example, it may be the text field of the form in which the cursor is positioned.

Syntax

element:focus { … }

Example

First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">

input:focus {
border: 2px solid red;
}

Notes

Chrome does not add a style to the <a> element, to make it understand the a:focus rule, add the tabindex attribute to the <a> element.

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
8121171
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
118410.11X