自定义CSS修饰Checkbox后出现两个复选框，样式不生效如何解决

问题原因 #

1. 出现两个复选框是因为你当前代码只用span写了自定义样式的复选框，页面内还有配套的原生<input type="checkbox">元素没有做隐藏处理，两个控件同时显示就出现了重复的情况。
2. 自定义样式直接应用到原生checkbox不生效，一是因为浏览器默认的表单控件样式优先级高，需要先清除默认外观；二是你原有CSS里写了justify-content、align-items这两个flex布局属性，但没有加display: flex属性，样式本身就无法生效。

修复方案 #

方案1：直接给原生checkbox应用自定义样式（无需额外span）

直接修改你的CSS代码如下，不需要再单独写span节点：

.treejs-checkbox {
  /* 清除原生checkbox默认样式 */
  -webkit-appearance: none;
  appearance: none;
  /* 补充flex布局声明，让对齐属性生效 */
  display: flex;
  width: 25px;
  height: 25px;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 100px;
  background-color: #FFF;
  border: 2px solid #00EA90;
  box-shadow: 0px 0px 0px 0px #00EA90 inset;
  transition: all 0.15s cubic-bezier(0, 1.05, 0.72, 1.07);
  cursor: pointer;
}
/* 补充选中状态样式 */
.treejs-checkbox:checked {
  background-color: #00EA90;
  box-shadow: 0px 0px 0px 6px #FFF inset;
}

HTML修改为直接给原生checkbox加类即可：

<li>
  <input type="checkbox" class="treejs-checkbox" id="teams-checkbox">
  <label for="teams-checkbox" class="treejs-label">Teams</label>
</li>

方案2：保留现有span自定义样式的结构

1. 先给配套的原生checkbox加隐藏样式：

/* 替换为你页面内原生checkbox对应的类名 */
.treejs-native-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* 补充你原有样式缺失的display:flex */
.treejs-checkbox {
  display: flex;
  cursor: pointer;
  /* 剩下的原有样式不变 */
  width: 25px;
  height: 25px;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 100px;
  background-color: #FFF;
  border: 2px solid #00EA90;
  box-shadow: 0px 0px 0px 0px #00EA90 inset;
  transition: all 0.15s cubic-bezier(0, 1.05, 0.72, 1.07);
}
/* 补充选中状态的联动样式 */
.treejs-native-checkbox:checked + label .treejs-checkbox {
  background-color: #00EA90;
  box-shadow: 0px 0px 0px 6px #FFF inset;
}

2. 修改HTML结构，用label关联原生checkbox和显示内容，保证交互正常：

<li>
  <input type="checkbox" class="treejs-native-checkbox" id="teams-checkbox">
  <label for="teams-checkbox">
    <span class="treejs-checkbox"></span>
    <span class="treejs-label">Teams</span>
  </label>
</li>

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