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
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
Basic support |
1.0 |
1.0 (1.7 or earlier) |
8.0 |
7.0 |
1.0 |
Mobile browsers
Feature |
Android |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
Basic support |
1.0 |
1.0 (1) |
8.0 |
6.0 |
1.0 |