title: Pure-CSS checkbox with label not working
body: <p>I'm trying to get a check to be displayed when the associated checkbox input is checked. Currently, this isn't working unless I move the input field outside of the <em>span</em> tag.</p>
  
  <p><strong>*The HTML structure can't be altered because of the use of <em>.NET</em> (At least this is my understanding)*</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>body {
    background-color: #1790b5;
    height: 100%;
    font-family: "Open Sans", sans-serif;
  }
  
  .checkBox {
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
  }
  
  .checkBoxLabel {
    display: inline-block;
    color: #fff;
    cursor: pointer;
    position: relative;
  }
  .checkBoxLabel span {
    display: inline-block;
    position: relative;
    background-color: transparent;
    width: 25px;
    height: 25px;
    transform-origin: center;
    border: 2px solid #bdc3c7;
    vertical-align: -6px;
    margin-right: 10px;
  }
  .checkBoxLabel span:before, .checkBoxLabel span:after {
    content: "";
    width: 0;
    background: #fff;
    position: absolute;
  }
  
  .inputCheckBox {
    display: none;
  }
  .inputCheckBox:checked + label span {
    background-color: #fff;
  }
  .inputCheckBox:checked + label span:after {
    content: "\2714";
    color: blue;
    top: -6px;
    font-size: 28px;
    left: 2px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;!-- .Net Code --&gt;
    &lt;div class="checkBox"&gt;
      &lt;asp:CheckBox name="cb1" class="box" ID="cb1" runat="server"&gt;&lt;/asp:CheckBox&gt;
      &lt;asp:Label AssociatedControlId="cb1" class="checkBox-label" runat="server"&gt;&lt;/asp:Label&gt;
    &lt;/div&gt;
  
    &lt;!-- renders: --&gt;
  
    &lt;div class="checkBox"&gt;
      &lt;span class="box"&gt;
        &lt;input type="checkbox" name="cb" id="cb1"&gt;
      &lt;/span&gt;
      &lt;label for="cb1" class="checkBox-label"&gt;Check&lt;/label&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I haven't tried to do this with a JS click event function but I thought it would be "simpler" if I did this with <em>JUST</em> CSS. </p>