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
1 |
.first-name:focus { color: red; } |
2 |
.last-name:focus { color: lime; } |
1 |
<input class="first-name" value="I'll be red when focused"> |
2 |
<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 |
