css伪类:focus-within表单聚焦样式-css教程-PHP中文网

css伪类:focus-within表单聚焦样式

P粉602998670

发布： 2025-10-27 19:33:01

原创

906人浏览过

:focus-within 可在表单容器内任意子元素获焦时触发样式变化，适用于高亮输入区域、显示隐藏按钮或提示信息，如 .form-group:focus-within 应用背景和阴影，.input-wrapper:focus-within 显示清除按钮，提升交互体验且无需 JavaScript，现代浏览器支持良好，但需注意避免过度动画并考虑老版本浏览器兼容性。

css伪类:focus-within表单聚焦样式

当表单容器内的任意子元素获得焦点时，:focus-within 伪类就能触发样式变化。这个特性非常适合用于提升表单的交互体验，比如高亮整个输入区域、显示隐藏提示或调整布局。

基本用法

使用 :focus-within 可以选择一个父元素，只要其内部任何一个子元素处于聚焦状态，该父元素就会应用指定样式。

例如：

.form-group:focus-within {
  background-color: #f0f8ff;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

登录后复制

只要 .form-group 内的 input、textarea 或其他可聚焦元素被点击或通过 Tab 键选中，整个容器都会获得上述样式。

实际应用场景

这个伪类在以下场景中特别有用：

立即学习“前端免费学习笔记（深入）”；

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

表单行高亮：用户在某个输入框输入时，突出显示当前行
动态显示按钮：聚焦输入框时自动显示“清除”按钮
辅助信息展开：获得焦点时显示帮助文本或格式提示

示例：聚焦时显示清除按钮

.input-wrapper {
  display: flex;
  align-items: center;
}

.clear-btn {
  display: none;
}

.input-wrapper:focus-within .clear-btn {
  display: block;
}

登录后复制

这样，只有当输入框获得焦点时，清除按钮才会出现，界面更简洁。