:focus
:focus
该:focusCSS伪类表示已经接收焦点的元素（如窗体输入）。当用户点击或点击某个元素或通过键盘的tab键选择该元素时，通常会触发它。
/* Selects any <input> element only when focused */
input:focus {
color: red;
}
这个伪类只应用于聚焦元素本身，而不包括它的父元素，如同:checked和:enabled，但与:active或:hover不同。
语法
:focus
实例
HTML
<input class="red-input" value="I'll be red when focused.">
<input class="lime-input" value="I'll be lime when focused.">
CSS
.red-input:focus {
color: red;
}
.lime-input:focus {
color: lime;
}
结果
规范
| Specification | Status | Comment |
|---|---|---|
| HTML Living StandardThe definition of ':focus' in that specification. | Living Standard | Defines HTML-specific semantics. |
| Selectors Level 4The definition of ':focus' in that specification. | Working Draft | No change. |
| Selectors Level 3The definition of ':focus' in that specification. | Recommendation | No change. |
| CSS Level 2 (Revision 1)The definition of ':focus' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 8.0 | 7.0 | 1.0 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1) | 8.0 | 6.0 | 1.0 |
