单击/聚焦时更改选择组件的InputLabel颜色

<label for="checkbox" class="custom-label">选择组件</label>
<input type="checkbox" id="checkbox" class="custom-checkbox">

.custom-label {
  transition: color 0.3s ease;
}

.custom-checkbox:focus + .custom-label {
  color: blue; /* 聚焦时的颜色 */
}

.custom-checkbox:checked + .custom-label {
  color: red; /* 选中时的颜色 */
}

const checkbox = document.getElementById('checkbox');
const label = document.querySelector('.custom-label');

checkbox.addEventListener('click', function() {
  if (this.checked) {
    label.style.color = 'red'; /* 选中时的颜色 */
  } else {
    label.style.color = ''; /* 恢复默认颜色 */
  }
});

checkbox.addEventListener('focus', function() {
  label.style.color = 'blue'; /* 聚焦时的颜色 */
});

checkbox.addEventListener('blur', function() {
  label.style.color = ''; /* 失去焦点时恢复默认颜色 */
});