如何通过CSS或JS将输入框Placeholder转为浮动标签

给你两种实现方式，纯CSS和JS方案，按需选择：

一、纯CSS方案（推荐，无JS依赖） #

首先需要调整HTML结构，用<label>替代原来的placeholder，更符合语义化：

<div class="row mg-b-25">
    <div class="col-lg-4">
        <div class="form-group floating-label-group">
            <input class="form-control" type="text" name="category_name" id="category_name" maxlength="50" required>
            <label for="category_name">Enter Category *</label>
        </div>
    </div>
</div>

添加以下CSS样式：

/* 容器设置相对定位，作为标签的定位参照 */
.floating-label-group {
  position: relative;
  margin-bottom: 1.5rem;
}

/* 调整输入框内边距，给浮动标签留出空间 */
.floating-label-group .form-control {
  height: auto;
  padding: 1.25rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  font-size: 1rem;
}

/* 标签基础样式 */
.floating-label-group label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0 0.25rem;
  background-color: #fff;
  color: #6c757d;
  transition: all 0.2s ease;
  pointer-events: none; /* 避免点击标签干扰输入框聚焦 */
}

/* 输入框聚焦/有内容时，触发标签浮动效果 */
.floating-label-group .form-control:focus + label,
.floating-label-group .form-control:not(:placeholder-shown) + label {
  top: -0.5rem;
  left: 0.5rem;
  font-size: 0.875rem;
  color: #0d6efd;
}

/* 输入框聚焦时的高亮样式（可选） */
.floating-label-group .form-control:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  outline: none;
}

原理：利用CSS相邻兄弟选择器和伪类，监听输入框的聚焦状态或内容存在状态，动态改变标签的位置和样式。

二、JS方案（无需修改原始HTML） #

如果不想改动现有HTML结构，可以用JS动态生成标签并处理交互：

保留你原来的HTML：

<div class="row mg-b-25">
    <div class="col-lg-4">
        <div class="form-group">
            <input class="form-control" type="text" name="category_name" id="category_name" placeholder="Enter Category *" maxlength="50" required>
        </div>
    </div>
</div>

添加JS代码：

const input = document.getElementById('category_name');
const labelText = input.getAttribute('placeholder');
input.setAttribute('placeholder', ''); // 清空原placeholder

// 创建浮动标签元素
const label = document.createElement('label');
label.setAttribute('for', input.id);
label.textContent = labelText;
label.classList.add('floating-label');

// 将标签插入到输入框的父容器中
input.parentNode.appendChild(label);

// 调整输入框内边距
input.style.paddingTop = '1.5rem';
input.style.paddingBottom = '0.5rem';

// 聚焦时触发浮动
input.addEventListener('focus', () => {
    label.classList.add('floating');
});

// 失焦时，若输入框为空则取消浮动
input.addEventListener('blur', () => {
    if (!input.value.trim()) {
        label.classList.remove('floating');
    }
});

// 页面加载时，若输入框已有内容则保持浮动状态
if (input.value.trim()) {
    label.classList.add('floating');
}

配套CSS样式：

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

.floating-label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0 0.25rem;
  background-color: #fff;
  color: #6c757d;
  transition: all 0.2s ease;
  pointer-events: none;
  font-size: 1rem;
}

.floating-label.floating {
  top: -0.5rem;
  left: 0.5rem;
  font-size: 0.875rem;
  color: #0d6efd;
}

.form-control:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  outline: none;
}

两种方案对比：

• 纯CSS方案：代码简洁、性能好，符合语义化，适合新项目或允许调整HTML结构的场景。
• JS方案：无需改动原有HTML，适合已有项目的快速改造，兼容性更广泛（不过现在主流浏览器都支持CSS伪类了）。

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