focus property CSS Reference

Definition and Usage

The :focus CSS pseudo-class is applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

Syntax

<element>:focus { ... }

Examples

.first-name:focus { color: red; }
.last-name:focus { color: lime; }

<input class="first-name" value="I'll be red when focused">
<input class="last-name" value="I'll be lime when focused">

Compatibility

Desktop browsers

Mobile browsers