本文介绍一种无需 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 浮动标签（支持自动识别输入状态）
<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)：现代浏览器支持，当<input>内容非空（即使用户删光了文字，只要曾输入过，该状态仍有效）或存在value属性时触发。它比:focus更贴近“已填写”的业务语义。 -
+ span相邻兄弟选择器：确保样式精准作用于同一<label></label>内紧随其后的<span></span>标签，避免全局污染。 -
translate+scale组合过渡：比单纯transform: translateY()更具视觉层次感，且transition: all 0.3s ease提供自然缓动效果。 -
pointer-events: none：防止<span></span>遮挡<input>的点击区域，保障交互完整性。
⚠️ 注意事项
- 若需兼容旧版 Safari（input:focus ~ span 并搭配
input:valid增强健壮性； -
placeholder=""必须显式声明，否则:placeholder-shown可能不触发； - 所有
<input>应包裹在<label></label>内（语义化 + 无障碍支持），并避免使用for/id分离结构； - 如需支持密码可见切换，可在
<input>后添加按钮，并通过 JS 切换type属性，CSS 动画将自动延续。
此方案零 JS、高可维护、语义清晰、无障碍友好，是现代表单浮动标签的最佳实践。
