p5.js中是否可以将checkbox的外观样式修改为toggle switch切换开关？

问题原因 #

• CSS拼写错误：隐藏默认复选框的选择器写错了，.siwtch应为.switch，这是样式不生效的核心原因
• 事件绑定错位：你给一开始用createCheckbox生成的默认复选框绑定了事件，但后续又把checkbox变量覆盖为你手动创建的#toggle元素，没有给这个元素绑定变更事件
• 冗余代码：已经手动写了带开关样式的复选框结构，开头的createCheckbox生成的元素没有用到，可以删除

修复后代码 #

JS代码

let checkbox;

function setup() {
  createDiv(`
    <label class="switch">
      <input id="toggle" type="checkbox"  />
      <span class="slider round"></span>
    </label>`);

  checkbox = select('#toggle');
  checkbox.changed(myCheckedEvent);
}

function myCheckedEvent() {
  if (this.checked()) {
    console.log("Checking!");
  } else {
    console.log("Unchecking!");
  }
}

CSS代码

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

/* 开关容器 */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* 隐藏默认HTML复选框 */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* 滑块 */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

#toggle:checked + .slider {
  background-color: #2196F3;
}

#toggle:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

#toggle:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* 圆角滑块 */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

HTML代码（无修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

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