CSS伪类 :focus表示获得焦点的元素(如表单输入)。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。

/* Selects any <input> when focused */
input:focus {
  color: red;
}

提示:此伪类仅适用于焦点元素本身。如果要选择包含焦点元素的元素,请使用:focus-within

语法

:focus

示例

HTML

<input class="red-input" value="I'll be red when focused."><br>
<input class="blue-input" value="I'll be blue when focused.">

CSS

.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}

结果

规范

Specification Status Comment
HTML Living Standard
:focus
Living Standard Defines HTML-specific semantics.
Selectors Level 4
:focus
Working Draft No change.
Selectors Level 3
:focus
Recommendation No change.
CSS Level 2 (Revision 1)
:focus
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

参考

文档标签和贡献者

标签: 
 此页面的贡献者: zhangchen, Harvesty, Fadeoc, FredWe, Gaohaoyang
 最后编辑者: zhangchen,