当输入框无内容时，::placeholder-shown 激活，结合 :focus 和 transition 可实现占位符上浮动画，如 translateY(-20px) 和缩小字体，模拟 Material Design 标签效果。
当用户在输入框中未输入内容时，::placeholder-shown 伪元素会处于激活状态。我们可以利用它来实现优雅的占位符动画效果，比如让占位符文字“上浮”或缩小，模拟 Material Design 风格的标签动画。
基本原理
::placeholder-shown 是一个 css 伪元素，用于匹配当前显示占位符文本的 <input> 或 <textarea> 元素。结合 :focus 和 CSS 过渡，可以创建平滑的占位符动画。
实现占位符上浮动画
目标：输入框获得焦点且用户未输入时，占位符向上移动并变小，形成标签效果。
html 结构示例：
立即学习“前端免费学习笔记（深入）”；
<div class=”input-group”>
<input type=”text” placeholder=”请输入姓名” required>
</div>
CSS 样式：
.input-group {
position: relative;
margin: 20px 0;
}
.input-group input {
padding: 12px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
transition: 0.3s ease;
}
.input-group input::placeholder {
opacity: 1;
color: #999;
transition: all 0.3s ease;
}
.input-group input:placeholder-shown:not(:focus)::placeholder {
transform: translateY(0);
}
.input-group input:focus::placeholder,
.input-group input:not(:placeholder-shown)::placeholder {
transform: translateY(-20px);
font-size: 12px;
color: #4a90e2;
}
关键点说明
- 使用 :not(:placeholder-shown) 判断用户已输入内容，此时占位符消失，但可通过样式控制其行为
- 结合 :focus 实现聚焦时动画
- transform 比改变位置更高效，避免重排
- 添加 transition 让动画更自然
- 确保父容器 position: relative，方便后续绝对定位标签（可选增强）
基本上就这些。合理使用 ::placeholder-shown 能提升表单交互体验，不复杂但容易忽略细节。