css伪元素::placeholder-shown输入占位符动画-css教程-PHP中文网

css伪元素::placeholder-shown输入占位符动画

P粉602998670

发布： 2025-10-21 22:54:01

原创

471人浏览过

当输入框无内容时，::placeholder-shown 激活，结合 :focus 和 transition 可实现占位符上浮动画，如 translateY(-20px) 和缩小字体，模拟 Material Design 标签效果。

css伪元素::placeholder-shown输入占位符动画

当用户在输入框中未输入内容时，::placeholder-shown 伪元素会处于激活状态。我们可以利用它来实现优雅的占位符动画效果，比如让占位符文字“上浮”或缩小，模拟 Material Design 风格的标签动画。

基本原理

::placeholder-shown 是一个 CSS 伪元素，用于匹配当前显示占位符文本的 <input> 或 <textarea> 元素。结合 :focus 和 CSS 过渡，可以创建平滑的占位符动画。

实现占位符上浮动画

目标：输入框获得焦点且用户未输入时，占位符向上移动并变小，形成标签效果。

HTML 结构示例：

Sider

多功能AI浏览器助手，帮助用户进行聊天、写作、阅读、翻译等

3159

查看详情

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

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;
}