:focus

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

CSS 中的 :focus 伪类用于为当前由键盘或鼠标激活的元素设置样式。这是一个示例

textarea:focus {
  background: pink;
}

任何元素(最常见的是 <input><textarea>)在被选中并准备输入文本时(例如,光标闪烁时)处于“焦点”状态。鼠标用户可以单击它们(或相关的 label)来聚焦,键盘用户可以通过 Tab 键切换到它们。

“Tab 键切换”

:focus 伪类的另一个用途是通过元素进行“Tab 键切换”。许多浏览器都具有用于 Tab 键选择的默认焦点状态,即虚线轮廓。它很容易移除,但如果确实要移除,请确保用合适的替代方案替换它

<a><button><input>textarea 默认都具有 :focus 状态,但您可以为 HTML 中的任何元素指定焦点状态。contenteditabletabindex 属性都适用于此,例如:

其他资源

浏览器支持

所有浏览器都支持 :focus 的基本用法。