如何在给定的HTML代码结构中实现label浮动效果？

针对你提供的HTML结构，这里给出两种可行的实现方式：

方案一：纯CSS（需浏览器支持:has选择器） #

这种方式无需JS，利用CSS伪类实现，适合现代浏览器环境。

修改后的HTML（添加空placeholder，可选） #

<div class="form-control">
  <label for="name" class="form-label">
    Name
  </label>
  <div ref="element">
    <input
      type="text"
      name="name"
      class="form-input"
      placeholder=" "
      required
    />
  </div>
</div>

CSS代码 #

/* 父容器设置相对定位，作为label的定位参照 */
.form-control {
  position: relative;
  margin: 20px 0;
}

/* 输入框基础样式 */
.form-input {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  background: transparent;
  outline: none;
}

/* Label初始状态：悬浮在输入框内，添加过渡动画 */
.form-label {
  position: absolute;
  left: 0;
  top: 10px;
  color: #999;
  font-size: 16px;
  transition: all 0.3s ease;
  pointer-events: none; /* 避免遮挡输入框点击 */
}

/* 输入框获得焦点时，label浮动 */
.form-control:focus-within .form-label,
/* 输入框有内容时（required生效），保持label浮动状态 */
.form-control:has(.form-input:valid) .form-label {
  top: -15px;
  font-size: 12px;
  color: #2196F3;
}

方案二：CSS + JS（兼容所有浏览器） #

如果需要兼容不支持:has选择器的旧浏览器，可结合JS监听输入状态：

HTML（保持原结构） #

<div class="form-control">
  <label for="name" class="form-label">
    Name
  </label>
  <div ref="element">
    <input
      type="text"
      name="name"
      class="form-input"
      <!-- placeholder="none" -->
      required
    />
  </div>
</div>

CSS代码 #

.form-control {
  position: relative;
  margin: 20px 0;
}

.form-input {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  background: transparent;
  outline: none;
}

.form-label {
  position: absolute;
  left: 0;
  top: 10px;
  color: #999;
  font-size: 16px;
  transition: all 0.3s ease;
  pointer-events: none;
}

/* 通过类控制label浮动状态 */
.form-control.has-value .form-label,
.form-control:focus-within .form-label {
  top: -15px;
  font-size: 12px;
  color: #2196F3;
}

JS代码 #

const input = document.querySelector('.form-input');
const formControl = input.closest('.form-control');

// 监听输入事件，切换容器类名
input.addEventListener('input', () => {
  formControl.classList.toggle('has-value', input.value.trim() !== '');
});

// 页面加载时检查输入框是否有值
window.addEventListener('load', () => {
  if (input.value.trim() !== '') {
    formControl.classList.add('has-value');
  }
});

效果说明 #

• 输入框未聚焦且无内容时，label显示在输入框内部
• 输入框获得焦点或有内容时，label向上浮动并缩小字体，同时改变颜色
• 过渡动画让浮动效果更平滑自然

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