title: CSS: checkbox not checked when spacebar is pressed
body: <p>I have the simple form below (and here: <a href="https://codepen.io/anon/pen/QxKrex" rel="nofollow noreferrer">https://codepen.io/anon/pen/QxKrex</a>).
  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?</p>
  
  <p><strong>index.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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';
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="/send.php" method="post" name="myForm"&gt;
        &lt;label for="fname"&gt;&lt;/label&gt;
        &lt;input type="text" id="fname" name="fname" placeholder="Name" required&gt;
          &lt;input type="checkbox" id="checkbox1"&gt;
          &lt;label for="checkbox1" tabindex="0;"&gt;&lt;/label&gt;
        &lt;label class="labelCheckbox"&gt;&amp;nbsp&amp;nbspI agree&lt;/label&gt;
        &lt;button class="modalButton" type="submit" value="submit" id="submit2"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>