设置复选框的水平样式，类似于进度条

<div class="progress-bar">
  <input type="checkbox" id="checkbox">
  <div class="progress"></div>
</div>

.progress-bar {
  width: 200px;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
  overflow: hidden;
}

input[type="checkbox"] {
  display: none;
}

.progress {
  height: 100%;
  background-color: #4CAF50;
  width: 0;
  transition: width 0.3s ease-in-out;
}

const checkbox = document.getElementById('checkbox');
const progress = document.querySelector('.progress');

checkbox.addEventListener('change', function() {
  if (this.checked) {
    progress.style.width = '100%';
  } else {
    progress.style.width = '0';
  }
});