Avoid using display: none to hide elements that need to be focused.

sneaky-css-checkbox-example.html

<style rel="stylesheet" type="text/css">
  .checkbox-example button {
    margin: 0 0 0.5rem;
  }
  .checkbox-example input {
    margin: 0;
    padding: 0;
    cursor: pointer;
  }
  .checkbox-example input + label {
    display: block;
    font-weight: 700;
    border: 0.25rem dotted lightseagreen;
    padding: 0.25rem;
    margin: 0 0 0.5rem;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  .checkbox-example input:focus + label {
    outline: dodgerblue solid 0.25rem;
    outline-offset: 0.25rem;
  }
  .checkbox-example input:checked + label {
    border: 0.25rem solid orangered;
  }
  .checkbox-example input#checkbox-1 {
    display: none;
  }
  .checkbox-example input#checkbox-2 {
    position: absolute;
    // use clip for legacy browsers
    clip: rect(0, 0, 0, 0);
    clip-path: circle(0);
  }
</style>

<div class="checkbox-example">
  <button>Click me to focus before the checkboxes</button>
  <input id="checkbox-1" type="checkbox" />
  <label for="checkbox-1">Custom checkbox with <code>display: none</code></label>
  <input id="checkbox-2" type="checkbox" />
  <label for="checkbox-2">Custom checkbox with styling to hide the input</label>
</div>