:focus - CSS：层叠样式表

:focusBaseline Widely availableThis feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Learn moreSee full compatibilityReport feedback:focus CSS 伪类表示获得焦点的元素（如表单输入）。当用户点击或轻触一个元素或使用键盘的 Tab 键选择它时，它会被触发。

尝试一下

label {

display: block;

margin-top: 1em;

}

input:focus {

background-color: lightblue;

}

select:focus {

background-color: ivory;

}

备注：

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

语法css:focus {

/* ... */

}

示例HTMLhtml

CSScss.red-input:focus {

background: yellow;

color: red;

}

.blue-input:focus {

background: yellow;

color: blue;

}

结果无障碍考虑请确保视力不佳的人可以看到视觉焦点指示器。这也将有利于任何在明亮空间（如室外阳光下）使用屏幕的人。WCAG 2.1 SC 1.4.11 非文本对比度 要求视觉焦点指示符的对比度至少为 3 比 1。

无障碍的视觉焦点指示：让你的网站更具焦点！设计有用且可用的焦点指示器的技巧

:focus { outline: none; }永远不要为了仅移除焦点轮廓（可见的焦点指示），而不替换为符合 WCAG 2.1 SC 1.4.11 非文本对比度标准的焦点轮廓。

小建议：永远不要移除 CSS 轮廓

规范SpecificationHTML # selector-focusSelectors Level 4 # focus-pseudo浏览器兼容性参见

:focus-visible

:focus-within