Example of a custom checkbox with _no_ consideration for proper accessibility.

inaccessible-custom-checkbox.css

.hide {
  display: none;
}

.checkbox-wrapper {
  display: flex;
}

#custom-subscribe {
  display: inline-block;
  border: 1px solid black;
  height: 1rem;
  width: 1rem;
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#custom-subscribe-checkmark {
  color: green;
}

inaccessible-custom-checkbox.html

<div class="checkbox-wrapper">
  <span id="custom-subscribe-label">Subscribe to custom newsletter</span>
  <span id="custom-subscribe">
    <span id="custom-subscribe-checkmark" class="hide">✔</span>
  </span>
</div>

inaccessible-custom-checkbox.js

const checkbox = document.querySelector("#custom-subscribe");
const checkmark = document.querySelector("#custom-subscribe-checkmark");

function toggleCustomSubscribe() {
  checkmark.classList.toggle("hide");
}

checkbox.addEventListener("click", toggleCustomSubscribe);