JSFiddle - React, Tailwind, and code Playground

by silverwind

HTML

<input type="checkbox"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox" class="indet"/>

CSS

:root {
  --color-primary: #4183c4;
  --color-primary-dark-2: #31699f;
  --color-primary-dark-3: #2b5c8b;
  --color-primary-contrast: #fff;
  --color-secondary: #dedede;
  --color-secondary-dark-2: #bfbfbf;
  --color-secondary-dark-3: #a0a0a0;
  --color-text: #212121;
  --color-input-background: #fff;
  --checkbox-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="96 96 576 576"><path d="m320 545 288-288-45-47-243 243-114-114-45 45zM608 96c36 0 64 30 64 65v447c0 34-28 64-64 64H161c-36 0-65-30-65-64V161c0-35 29-65 65-65h447z"/></svg>');
  --checkbox-unchecked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="96 96 576 576"><path d="M608 96c34 0 64 30 64 65v447c0 34-30 64-64 64H161c-35 0-65-30-65-64V161c0-35 30-65 65-65h447zm0 65H161v447h447V161z"/></svg>');
  --checkbox-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="96 96 576 576"><path d="M545 416v-63H224v63h321zm63-320c34 0 64 30 64 65v447c0 34-30 64-64 64H161c-35 0-65-30-65-64V161c0-35 30-65 65-65h447z"/></svg>');
}

input[type="checkbox"] {
  appearance: none;
  position: relative;
  height: 32px;
  width: 32px;
  user-select: none;
  border-radius: 12%;
  background: var(--color-input-background);
}

input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  mask-size: cover;
  -webkit-mask-size: cover;
}

input[type="checkbox"]::after {
  background: var(--color-secondary);
  mask-image: var(--checkbox-unchecked);
  -webkit-mask-image: var(--checkbox-unchecked);
}

input[type="checkbox"]:hover::after {
  background: var(--color-secondary-dark-2);
}

input[type="checkbox"]:active::after {
  background: var(--color-secondary-dark-3);
}

input[type="checkbox"]:checked {
  background: var(--color-primary-contrast);
}

input[type="checkbox"]:checked::after {
  background: var(--color-primary);
  mask-image:...

JavaScript

document.querySelector('.indet').indeterminate = true;