求助：实现类似Gmail登录的浮动输入框及textarea适配方案

核心问题修复点 #

输入内容后标签重叠，本质是标签的定位覆盖逻辑和输入框状态判断有问题。需要确保：

• 输入框聚焦/有内容时，标签上浮到输入框顶部且不遮挡内容
• 输入框无内容且失焦时，标签回到输入框内部默认位置
• 适配textarea的多行特性，避免位置异常

完整代码实现 #

HTML结构 #

<!-- 文本输入框 -->
<div class="form-group">
  <input type="text" id="email" class="form-input" placeholder=" " />
  <label for="email" class="form-label">邮箱地址</label>
</div>

<!-- 地址输入框（textarea） -->
<div class="form-group">
  <textarea id="address" class="form-input form-textarea" placeholder=" "></textarea>
  <label for="address" class="form-label">详细地址</label>
</div>

CSS样式 #

.form-group {
  position: relative;
  margin-bottom: 2rem;
}

.form-input {
  width: 100%;
  padding: 1rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #fff;
  outline: none;
  box-sizing: border-box;
}

/* 适配textarea的多行特性 */
.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-label {
  position: absolute;
  left: 0.8rem;
  top: 1rem;
  color: #666;
  transition: all 0.2s ease;
  pointer-events: none; /* 避免点击标签干扰输入框 */
  background-color: #fff; /* 用背景覆盖输入内容，解决重叠 */
  padding: 0 0.2rem; /* 左右加内边距，确保完全遮盖下方内容 */
}

/* 输入框聚焦或有内容时，标签上浮 */
.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
  top: -0.6rem;
  left: 0.6rem;
  font-size: 0.8rem;
  color: #1a73e8; /* 还原Gmail的蓝色风格 */
}

/* 聚焦时的边框高亮 */
.form-input:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

关键细节说明 #

1. placeholder=" "：必须设置非空占位符（空格即可），这样:not(:placeholder-shown)伪类才能准确判断输入框是否有内容
2. 标签背景色：和输入框背景保持一致，搭配左右内边距，彻底解决标签与输入内容重叠的问题
3. textarea适配：通过min-height保证输入区域足够，保留垂直拖拽调整大小的功能，标签定位逻辑和input完全统一
4. 过渡动画：用transition实现标签平滑上浮/下沉，和Gmail的交互体验一致

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