如何实现登录表单中Label在Hover或Active状态下的上移效果

嘿，我来帮你搞定这个交互效果！你已经用position: absolute把label放在input上方了，接下来只需要借助CSS的状态伪类，再加点过渡动画，就能实现流畅的label上移效果，我还额外优化了输入内容后label保持上移的体验，一起来看完整方案：

完整代码示例 #

首先是基于你的HTML结构调整后的代码（确保样式能正确作用）：

<div id="signIn">
  <h2>Login</h2>
  <div class="input-group email">
    <label>Email</label>
    <input type="text" name="uname" required>
  </div>
  <div class="input-group pass">
    <label>Password</label>
    <input type="password" name="psw" required>
  </div>
</div>

然后是核心CSS代码：

/* 给父容器设置相对定位，让绝对定位的label有参照基准 */
.input-group {
  position: relative;
  margin-bottom: 2rem; /* 给每个输入组预留间距，避免拥挤 */
}

/* 设置label的初始样式与定位 */
.input-group label {
  position: absolute;
  top: 10px; /* 初始位置，和input垂直居中对齐 */
  left: 12px;
  color: #666;
  transition: all 0.3s ease; /* 过渡动画，让移动/缩放更平滑自然 */
  pointer-events: none; /* 防止label遮挡input的点击事件，点击label也能聚焦input */
}

/* 设置input的基础样式，给label上移预留空间 */
.input-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  padding-top: 1.5rem; /* 顶部留足空间，避免label上移后和输入内容重叠 */
}

/* 当input聚焦时，触发label上移+缩放效果 */
.input-group:focus-within label {
  top: -10px;
  left: 8px;
  font-size: 0.8rem;
  color: #2196F3; /* 聚焦时改变颜色，强化交互反馈 */
  background-color: #fff; /* 用背景色覆盖input边框，避免label和边框重叠 */
  padding: 0 4px;
}

/* 当鼠标hover输入组时，label同步上移 */
.input-group:hover label {
  top: -10px;
  left: 8px;
  font-size: 0.8rem;
}

/* 额外优化：当input有内容时，label保持上移状态（利用required属性的:valid伪类） */
.input-group input:valid:not(:placeholder-shown) + label {
  top: -10px;
  left: 8px;
  font-size: 0.8rem;
  color: #666;
}

关键细节说明 #

• position: relative给父容器：绝对定位的元素需要相对父元素定位，避免label跑到页面角落。
• :focus-within伪类：这是个非常实用的伪类，当父容器内的任意元素（这里是input）获得焦点时就触发样式变化，比单独给input加:focus更灵活——点击label时input也会聚焦，这个伪类能统一处理这种场景。
• 过渡动画transition: all 0.3s ease：让label的移动、字体缩放过程更丝滑，不会显得生硬突兀。
• :valid:not(:placeholder-shown)：因为你的input带有required属性，当输入内容后input会处于valid状态，结合:not(:placeholder-shown)可以判断input是否有真实内容，让label保持上移，避免用户输入后label又回落的尴尬。

你可以根据自己的设计风格，调整颜色、字体大小、移动距离这些参数，适配你的页面~

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