<div class="wrapper">
  <div class="container">
    <p class="title">チェックボックス：</p>
    <label><input type="checkbox" id="checkbox"><span>checkbox</span></label>
  </div>
  <div class="container">
    <p class="title">ラジオボタン：</p>
    <label><input type="radio" name="radio"><span>radio1</span></label>
    <label><input type="radio" name="radio"><span>radio2</span></label>
  </div>
</div>

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.container {
  + .container {
    margin-top: 2rem;
  }
}
label {
  display: inline-block;
  margin-top: 1rem;
}
input {
  &:indeterminate {
    + span {
      color: red;
    }
  }
}

const checkbox = document.getElementById("checkbox");
checkbox.indeterminate = true;