在css中:focus-within输入区域样式-css教程-PHP中文网

在css中:focus-within输入区域样式

P粉602998670

发布： 2025-10-30 14:59:17

原创

545人浏览过

:focus-within 是 CSS 伪类，当元素内任何子元素获得焦点时触发，常用于高亮表单容器。例如 input 获得焦点时，父级 .input-group 应用边框变色或阴影，提升可访问性与用户体验；还可实现输入时显示清除按钮等动态效果，配合 transition 更流畅，现代浏览器支持良好，IE 不支持需 JS 模拟。

在css中:focus-within输入区域样式

当用户与表单元素交互时，:focus-within 是一个非常实用的 CSS 伪类，它能帮助我们为包含获得焦点子元素的容器设置样式。特别适用于输入区域（如 input、textarea）所在的父级容器，比如搜索框、表单卡片或输入组。

什么是 :focus-within？

:focus-within 会匹配一个元素，只要该元素内部有任何子元素获得了焦点。这意味着即使焦点在 input 上，它的父 div 也能响应样式变化。

例如：一个包含 label 和 input 的 div，在 input 获得焦点时，给整个 div 添加边框或背景色。

基本用法示例

HTML 结构：

<div class="input-group">
  <label for="name">姓名</label>
  <input type="text" id="name" />
</div>

登录后复制

CSS 样式：

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

.input-group {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

.input-group:focus-within {
  border-color: #007cba;
  box-shadow: 0 0 5px rgba(0, 124, 186, 0.3);
}

登录后复制

效果：当用户点击 input 输入框时，外层的 .input-group 会立即高亮显示，提升可访问性和用户体验。

奇域

奇域是一个专注于中式美学的国风AI绘画创作平台

查看详情

实际应用场景

表单卡片高亮：在复杂表单中，让用户清楚当前正在填写哪个区域。
搜索框激活状态：搜索区域获得焦点后展开或改变背景色。
动态显示按钮：输入框获得焦点时，显示“清除”按钮或“提交”提示。

示例：输入时显示清除按钮

.search-group {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 4px;
}

.search-group:focus-within .clear-btn {
  opacity: 1;
  visibility: visible;
}

.clear-btn {
  opacity: 0;
  visibility: hidden;
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
}

登录后复制