自定义输入复选框不确定答案

【问题标题】：Customize input checkbox indeterminate自定义输入复选框不确定
【发布时间】：2018-07-04 22:40:02
【问题描述】：

我希望输入复选框不确定看起来像这样indeterminate

我的意思不是颜色，而是半填充类型的外观。

【问题讨论】：

到目前为止你尝试过什么？可以加个代码示例吗？
只需使用从左上角到右下角对角线运行的 CSS 渐变，颜色停止在 50%。
myCheckbox[type="checkbox"]:indeterminate { background: linear-gradient(to bottom right, black 50%, gray 50%);} 我试过这样。它没有用。

【解决方案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>

【讨论】：