:focus

:focus CSS 伪类表示已获得焦点的元素（例如表单输入）。通常在用户点击或点击元素或使用键盘的 Tab 键选择它时触发。

试一试

注意：此伪类仅适用于聚焦的元素本身。如果要选择包含聚焦元素的元素，请使用 :focus-within。

css

:focus {
  /* ... */
}

确保视力较差的人可以看到视觉焦点指示器。这也有利于在光线充足的环境（如阳光下的户外）中使用屏幕的任何人。WCAG 2.1 SC 1.4.11 非文本对比度要求视觉焦点指示器至少为 3:1。

切勿在不替换为通过 WCAG 2.1 SC 1.4.11 非文本对比度的焦点轮廓的情况下，仅移除焦点轮廓（可见焦点指示器）。

html

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

css

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

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

规范
HTML 标准 # selector-focus
选择器级别 4 # focus-pseudo

BCD 表格仅在浏览器中加载