Настроить флажок ввода неопределенным

Question

Я хочу, чтобы флажок ввода неопределенный выглядел следующим образом неопределенный

Я имею в виду не цвет, а наполовину заполненный вид.

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>