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).


<element>:focus { ... }


.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">


Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.01.0 (1.7 or earlier)

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.01.0 (1)

Relative articles