Custom radio buttons and checkboxes are remarkably easy if you style the <input> it self using `appearance: none`. With multiple background images and masks there is really no need for a complicated sibling selectors and <label> setup:

    <label>
      <input type="checkbox">
      <span class="label">Some label</span>
    </label>

    input[type="checkbox"] {
      appearance: none;
      /* ... */
    }

    input[type="checkbox"]:checked { /* ... */ }
    input[type="checkbox"]:indeterminate { /* ... */ }
    input[type="checkbox"]:disabled { /* ... */ }