如何仅用CSS添加类？实现input点击时切换label的active类

首先明确一点：CSS本身无法直接给元素添加/移除class属性——类名属于DOM元素的属性，修改它需要JavaScript。但如果你的核心需求是实现"点击Input时Label呈现出类似active类的样式效果"，那纯CSS完全可以做到，甚至有几种不同的方案适配不同场景。

方案1：针对普通输入框（聚焦时触发样式） #

如果是text/email等普通输入框，我们可以利用CSS的focus-within伪类，它能匹配包含有聚焦元素的父容器，完美解决CSS无法向前选择元素的问题：

HTML结构 #

<label for="username">
  用户名
  <input type="text" id="username">
</label>

CSS代码 #

/* Label默认样式 */
label {
  color: #666;
  font-size: 14px;
  transition: all 0.2s ease;
}

/* 当Label内部的Input获得焦点时，应用类似active类的样式 */
label:focus-within {
  color: #0066cc;
  font-weight: 600;
  /* 这里直接写你原来.active类的所有样式即可 */
}

这样，只要点击input让它获得焦点，label就会自动切换到你想要的active样式，失去焦点时自动恢复，完全不需要JS。

如果不想调整HTML结构，也可以把input放在label前面，用相邻兄弟选择器：

<input type="text" id="username">
<label for="username">用户名</label>

input:focus + label {
  color: #0066cc;
  font-weight: 600;
}

方案2：针对单选/复选框（点击切换持久样式） #

如果是单选框或复选框，需要点击后保持样式（即使失去焦点），可以用:checked伪类结合兄弟选择器：

HTML结构 #

<input type="checkbox" id="agree">
<label for="agree">我同意用户协议</label>

CSS代码 #

label {
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 当复选框被选中时，Label应用active样式 */
input:checked + label {
  color: #2ecc71;
  font-weight: 600;
}

这种方案下，点击label或input都会切换选中状态，label的样式也会跟着切换，完全是纯CSS实现的交互。

关于"用CSS添加类"的说明 #

前面提到，CSS不能直接修改DOM的class属性，但我们可以通过状态伪类+组合选择器来模拟类的效果：

• 把原本写在.active类里的样式，绑定到元素的某个状态（比如:focus、:checked、:hover）
• 当元素触发这个状态时，就会自动应用对应的样式，视觉上和添加类完全一致

如果你的需求是必须给Label真正添加/移除.active类名（比如其他JS逻辑需要依赖这个类），那纯CSS做不到，但原生JS也非常简单，完全不需要jQuery：

const input = document.getElementById('username');
const label = document.querySelector('label[for="username"]');

input.addEventListener('focus', () => label.classList.add('active'));
input.addEventListener('blur', () => label.classList.remove('active'));

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