如何用纯CSS实现点击邮箱/密码输入框时的标签上移动画

你需要实现的效果是：点击输入框时标签向上移动，底部边框平滑过渡，以下是纯CSS的实现方案，无需SCSS/SASS：

当前效果 #

期望效果 #

完整代码 #

HTML（修正label关联的id问题）

<div class="form">
    <input class="email input" type="email" name="email" id="email" placeholder="" />
    <label class="label" for="email">Email Address</label>
</div>
<div class="form">
    <input class="password input" type="password" name="password" id="password" placeholder="" />
    <label class="label" for="password">Password</label>
</div>

CSS（添加动画与过渡逻辑）

.form {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.input {
  background: none;
  color: #c6c6c6;
  font-size: 1.8rem;
  padding: 1.6rem;
  display: block;
  border: none;
  border-bottom: 1px solid #c6c6c6;
  width: 100%;
  /* 边框颜色过渡 */
  transition: border-color 0.3s ease;
}

/* 输入框聚焦时的边框样式 */
.input:focus {
  outline: none;
  border-bottom-color: #2196F3; /* 自定义高亮颜色 */
}

.label {
  position: absolute;
  color: #c6c6c6;
  font-size: 1.6rem;
  left: 0.5rem;
  top: 1rem;
  /* 标签所有属性的过渡动画 */
  transition: all 0.3s ease;
  pointer-events: none; /* 避免标签干扰输入框点击 */
}

/* 输入框聚焦时，标签上移并缩小变色 */
.input:focus + .label {
  top: -0.8rem;
  font-size: 1.2rem;
  color: #2196F3; /* 与边框高亮色统一 */
}

/* 输入框有内容时，标签保持上移状态 */
.input:not(:placeholder-shown) + .label {
  top: -0.8rem;
  font-size: 1.2rem;
  color: #2196F3;
}

关键实现说明 #

• 平滑过渡：给输入框的边框颜色、标签的位置/字体/颜色添加transition属性，让状态变化更自然，过渡时长可根据需求调整。
• 聚焦状态控制：利用:focus伪类触发输入框边框变色，通过相邻兄弟选择器+同步修改标签的样式。
• 内容持久状态：通过:not(:placeholder-shown)伪类，确保输入框有内容时，即使失焦标签也保持上移状态（需配合空占位符placeholder=""）。
• 交互优化：给标签添加pointer-events: none，避免点击标签时干扰输入框的聚焦逻辑。

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