如何实现点击input/label后保持颜色变化？附代码求助

核心方案 #

给label定义一个active类来设置点击后的颜色样式，通过JavaScript监听点击事件切换这个类的状态，实现点击留色、再次点击恢复的效果；如果label和表单控件（复选框/单选框）绑定，也可以直接利用控件的checked状态关联样式，无需JS。

代码示例 #

基础实现（通用场景） #

HTML

<label class="toggle-label">点击我切换颜色</label>

CSS

/* 悬浮样式 */
.toggle-label:hover {
  color: #2196F3;
}

/* 点击后保持的样式 */
.toggle-label.active {
  color: #2196F3;
}

JavaScript

const targetLabel = document.querySelector('.toggle-label');
targetLabel.addEventListener('click', function() {
  this.classList.toggle('active');
});

表单绑定场景（更简洁） #

如果你的label是和复选框/单选框配套使用的，直接用CSS关联控件状态即可，不用写JS：

<input type="checkbox" id="check1">
<label for="check1" class="form-label">同意协议</label>

.form-label:hover {
  color: #F44336;
}

/* 复选框选中时，对应label变色 */
#check1:checked + .form-label {
  color: #F44336;
}

注意事项 #

• 如果页面有多个需要该效果的label，把querySelector换成querySelectorAll，用循环绑定事件即可。
• 颜色值可以根据你的需求替换成任意合法的CSS颜色（十六进制、RGB、颜色名等）。

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