如何用纯 CSS 实现表单标签的聚焦上浮动画-js教程-PHP中文网

如何用纯 CSS 实现表单标签的聚焦上浮动画

本文介绍一种无需 JavaScript 的优雅方案，利用 :focus 和 :not(:placeholder-shown) 伪类配合 CSS 过渡，实现输入框获得焦点时标签自动上移缩放的交互动画。

本文介绍一种无需 javascript 的优雅方案，利用 :focus 和 :not(:placeholder-shown) 伪类配合 css 过渡，实现输入框获得焦点时标签自动上移缩放的交互动画。

在表单设计中，“浮动标签（Floating Label）”是一种广受青睐的 UX 模式：初始状态下标签显示在输入框上方或内部；当用户聚焦或输入内容后，标签平滑上移并缩小，为输入内容腾出空间，同时保持字段语义清晰。你当前的 JavaScript 方案逻辑基本正确，但存在几个关键问题导致动画失效：

❌ 类名误加点号：classList.add(".username-focus-label-animation") 中的前缀 . 是 CSS 选择器语法，JS 中应传入纯类名字符串（如 "username-focus-label-animation"），否则浏览器无法识别该类；
❌ 未处理输入内容变化：仅监听 click 事件无法响应键盘聚焦（如 Tab 键）、粘贴、自动填充等场景，且失去焦点时未触发 blur 逻辑；
❌ 动画不可逆/状态耦合：手动维护 isFocused 状态易出错，且未考虑多输入框共存、初始值非空等边界情况。

更健壮、简洁且性能更优的解法是——完全交由 CSS 控制动画状态。以下为推荐实现：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

✅ 推荐方案：纯 CSS 浮动标签（支持自动识别输入状态）

<div class="login-container">
  <h2>Sign in to your account</h2>
  <form action="/api/signin">
    <label>
      <input type="text" name="username" placeholder="" required><span>Username</span>
    </label>
    <label>
      <input type="password" name="password1" placeholder="" required><span>Password</span>
    </label>
    <label>
      <input type="email" name="email" placeholder="" required><span>Email</span>
    </label>
    <button type="submit">Sign in</button>
  </form>
</div>

/* 基础重置 */
* { margin: 0; box-sizing: border-box; }

.login-container {
  max-width: 20rem;
  margin: 2rem auto;
  padding: 1.5rem;
  background-color: #1d5582;
  border-radius: 10%;
  color: #ddd;
}

.login-container h2 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 200;
  margin-bottom: 1.5rem;
}

.login-container form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.login-container label {
  position: relative;
}

.login-container label span {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  pointer-events: none; /* 防止遮挡输入框点击 */
  color: #aaa;
  transition: all 0.3s ease;
  font-size: 1rem;
}

/* 当输入框有内容（非空占位符）或获得焦点时，标签上浮缩小 */
.login-container input:not(:placeholder-shown),
.login-container input:focus {
  padding-top: 1.5rem; /* 为上浮标签预留空间 */
}

.login-container input:not(:placeholder-shown) + span,
.login-container input:focus + span {
  translate: 0 -1.3rem;
  scale: 0.8;
  color: #0bf;
  font-weight: 600;
}

/* 输入框聚焦时底部边框高亮 */
.login-container input:focus {
  outline: none;
  border-bottom-color: #0bf;
}

.login-container input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #082c4c;
  background: transparent;
  padding: 0.5rem 0;
  color: #ddd;
  font-size: 1rem;
  font-family: 'Urbanist', sans-serif;
}

.login-container button {
  padding: 0.75rem;
  background-color: #082c4c;
  color: #ddd;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.login-container button:hover {
  background-color: #07345b;
  transform: translateY(-1px);
}

✅ 关键技术要点说明

:not(:placeholder-shown)：现代浏览器支持，当内容非空（即使用户删光了文字，只要曾输入过，该状态仍有效）或存在 value 属性时触发。它比 :focus 更贴近“已填写”的业务语义。
+ span 相邻兄弟选择器：确保样式精准作用于同一内紧随其后的标签，避免全局污染。
translate + scale 组合过渡：比单纯 transform: translateY() 更具视觉层次感，且 transition: all 0.3s ease 提供自然缓动效果。
pointer-events: none：防止遮挡的点击区域，保障交互完整性。