仅用CSS实现输入框占位符聚焦后留存并位移过渡

这个问题我太熟悉了！你遇到的核心问题是：浏览器默认会在<input>获得焦点时，将placeholder的透明度设置为0，所以哪怕你写了位移动画，动画结束后它还是会被浏览器的默认样式隐藏掉。而且你不能修改HTML，那纯CSS完全可以搞定，下面是具体方案：

完整代码实现 #

<h3>Todo: Make placeholder persistent</h3>
<div class="container">
  <input type="text" placeholder="This placeholder should stay" />
</div>

<style>
.container { 
  margin-top: 80px; 
  padding: 0 20px; /* 加个内边距避免太靠边 */
}
input { 
  width: 500px; 
  font-size: 16px;
  padding: 12px 8px 8px; /* 顶部留足够空间给位移后的placeholder */
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}

/* 统一设置placeholder的基础样式和过渡 */
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
  transition: all 0.3s ease;
  opacity: 1; /* 强制默认显示 */
}

/* 聚焦时的样式：位移+缩小字体+保持显示 */
input:focus::-webkit-input-placeholder,
input:focus::-moz-placeholder,
input:focus::-ms-input-placeholder {
  transform: translateY(-40px);
  font-size: 12px;
  opacity: 1; /* 关键！覆盖浏览器默认的隐藏行为 */
  color: #666; /* 可以加个浅色调区分 */
}
</style>

关键知识点解析 #

• 强制设置opacity: 1：这是解决消失问题的核心，浏览器默认在input:focus时会把placeholder的opacity设为0，我们需要显式覆盖这个行为
• 给输入框加顶部内边距：位移后的placeholder需要足够的显示空间，避免被输入框的边框遮挡或者跑到外面
• 跨浏览器前缀：加上-moz-和-ms-前缀，兼容Firefox和IE浏览器
• 统一过渡属性：把过渡效果写在基础的placeholder样式里，避免重复代码，让动画更流畅

这样修改后，输入框聚焦时placeholder会平滑过渡到上方，并且一直保持显示状态，完全不需要修改HTML结构。

内容的提问来源于stack exchange，提问作者Shashank