自定义输入复选框不确定

Question

我希望输入复选框不确定为indeterminate

我不是说颜色，而是那种一半填充的外观。

Answer 1

我使用label来设置复选框的样式，并使用js来触发复选框的不确定状态。这是一个示例：

function toggle(demo) {
   if (demo.readOnly) demo.checked=demo.readOnly=false;
   else if (!demo.checked) demo.readOnly=demo.indeterminate=true;
}

input[type=checkbox] {
display:none;
}
input[type=checkbox] + label
{
  background: lightgrey;
  height: 20px;
  width: 20px;
  display:inline-block;
  padding: 0 0 0 0px;
  border: 2px solid #212121;
}

input[type=checkbox]:checked + label
{
  background: aqua;
  height: 20px;
  width: 20px;
  display:inline-block;
  padding: 0 0 0 0px;
}

input[type=checkbox]:indeterminate + label
{
  background: linear-gradient(to bottom right, aqua 50%, lightgrey 50%);
  height: 20px;
  width: 20px;
  display:inline-block;
  padding: 0 0 0 0px;
}

<div>
   <input type='checkbox' name='checkbox' value='valuable' id="test" onclick="toggle(this)"/><label for="test"></label>
</div>