CSS: checkbox not checked when spacebar is pressed

Question

I have the simple form below (and here: https://codepen.io/anon/pen/QxKrex). The checkbox works when you click on it, but I would like that when you have the focus on it (after a "tab" from the textfield) and press spacebar, it would be marked as well. However, it doesn't seem to work. Any ideas?

index.html

.labelCheckbox {
        display: contents;
    }
    
    .checkbox label {
        float: left;
        padding-left: 0px !important;
        font-size: initial;
    }
    
    input[type=checkbox] {
        opacity: 0;
    }
    
    input[type="checkbox"]{
        display: none;
    }
    
    input[type="checkbox"] + label::before{
        background-color: white;
        border: 1px solid #135BCF;
        content: '';
        display: inline-block;
        height: 22px;
        width: 22px;
        text-align: center;
        margin: 0 5px -2px 0;
        overflow: hidden;
        top: 3px;
        position: relative;
        float: initial;
    }
    
    input[type="checkbox"]:checked + label::before{
        content: '\2713';
    }

<form action="/send.php" method="post" name="myForm">
      <label for="fname"></label>
      <input type="text" id="fname" name="fname" placeholder="Name" required>
        <input type="checkbox" id="checkbox1">
        <label for="checkbox1" tabindex="0;"></label>
      <label class="labelCheckbox">&nbsp&nbspI agree</label>
      <button class="modalButton" type="submit" value="submit" id="submit2">Submit</button>
    </form>

Answer 1

You can't use display:none; or visibility:hidden; on the <input type="checkbox"/> to check or uncheck with SPACE key. But you are using opacity:0; to hide the checkbox element, that's fine to hide the element:

input[type="checkbox"] {
  opacity:0;
}
input[type="checkbox"] + label {
  outline:0;
  user-select:none;
}
input[type="checkbox"] + label::before {
  background:#fff;
  border:1px solid #999;
  content:'';
  display:inline-block;
  height:22px;
  overflow:hidden;
  position:relative;
  text-align:center;
  top:7px;
  width:22px; 
}
input[type="checkbox"]:checked + label::before {
  content:'\2713';
}
input[type="checkbox"]:focus + label::before {
  border-color:#135BCF;
}

<form action="/send.php" method="post" name="myForm">
  <label for="fname"></label>
  <input type="text" id="fname" name="fname" placeholder="Name" required>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" tabindex="-1"></label>
  <label class="labelCheckbox">I agree</label>
  <button class="modalButton" type="submit" value="submit" id="submit2">Submit</button>
</form>

To ignore the "real" checkbox on tabindex you need to set the tabindex attribute to -1.

---

You can improve the custom checkbox element like the following:

input[type="checkbox"] {
  opacity:0;
}
input[type="checkbox"] + label {
  margin-left:10px;
  outline:0;
  padding-left:5px;
  position:relative;
  user-select:none;
}
input[type="checkbox"] + label::before {
  background:#fff;
  border:1px solid #999;
  content:'';
  height:22px;
  left:0;
  position:absolute;
  text-align:center;
  transform:translate(-100%,-50%);
  top:50%;
  width:22px;
}
input[type="checkbox"]:checked + label::before {
  content:'\2713';
}
input[type="checkbox"]:focus + label::before {
  border-color:#135BCF;
}

<input type="text" value=""/>
<input type="checkbox" id="checkbox1">
<label for="checkbox1" tabindex="-1">I agree</label>
<button>OK</button>

With this checkbox element you can also click on the label text to check the checkbox. You can also focus the control with the TAB and check and uncheck the checkbox with SPACE.

Answer 2

As you can't tick/untick the checkbox if it's not displayed,

I suggest you to use the ::after pseudo-element to cover the regular checkbox.

See working snippet, with some comments:

.labelCheckbox {
  display: contents;
}

.checkbox label {
  float: left;
  padding-left: 0px !important;
  font-size: initial;
}

/* TAKIT: Added this */
input[type="checkbox"] {
  position: relative;
}

/* TAKIT: Changed a little the style below */
input[type="checkbox"]::before {
  display: inline-block;
  position: absolute; 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -0.33em;
  border: 1px solid #135BCF;
  background-color: white;
  text-align: center;
  content: '';
}

input[type="checkbox"]:checked::before {
  content: '\2713';
}

<form action="/send.php" method="post" name="myForm">
  <label for="fname"></label>
  <input type="text" id="fname" name="fname" placeholder="Name" required>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" tabindex="0;"></label>
  <label class="labelCheckbox">  I agree</label>
  <button class="modalButton" type="submit" value="submit" id="submit2">Submit</button>
</form>

Hope it helps.