登录表单开发求助：实现点击输入时placeholder上移的label组件

要实现你需要的「点击输入框或输入内容后，提示文本上浮到输入框上方」的效果，我们可以通过调整HTML结构+CSS伪类动画来完成，以下是完整解决方案：

完整代码 #

HTML #

<div class="form-group">
  <input class="capo" placeholder=" " />
  <label class="floating-label">AboveInput</label>
</div>

CSS #

/* 表单组容器，用于定位浮动标签 */
.form-group {
  position: relative;
  margin-bottom: 1.5rem;
  width: 160px;
}

/* 输入框样式 */
.capo {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc; /* 可选：添加底部边框区分输入区域 */
  height: 2rem;
  width: 100%;
  color: black;
  padding-top: 1rem; /* 为上浮的标签预留空间 */
  box-sizing: border-box;
}

/* 浮动标签样式 */
.floating-label {
  position: absolute;
  left: 0;
  top: 1rem; /* 初始与输入框内容位置对齐 */
  color: #666;
  transition: all 0.2s ease; /* 平滑过渡动画 */
  pointer-events: none; /* 不干扰输入框的点击交互 */
}

/* 触发标签上浮的两种状态 */
.form-group:focus-within .floating-label,
.capo:not(:placeholder-shown) + .floating-label {
  top: 0;
  font-size: 0.8rem;
  color: #333;
}

/* 移除默认聚焦轮廓 */
textarea:focus,
input:focus {
  outline: none;
}

关键逻辑说明 #

• 用.form-group作为相对定位容器，确保浮动标签的绝对定位基于输入框区域
• .floating-label初始时覆盖在输入框的内容位置，pointer-events: none避免遮挡输入框的点击事件
• 通过:focus-within监听输入框的聚焦状态，:not(:placeholder-shown)监听输入框有内容的状态，两种状态下均触发标签上浮
• 加入transition属性让标签的位置和大小变化更平滑，提升交互体验

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