title: Custom Checkbox Button Issue
body: <p>I´m trying to make a custom checkbox buttons that when clicked on will change its color as an indicator that they are active. I got up the point where its almost done but the checkbox is appearing left of the box instead of being the button itself. I can't find out how to do this.</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>input[type=checkbox] {
      width: auto;
      height: 20px;
      cursor: pointer;    
      position: relative;
      opacity: 0;
      z-index: 9999;
  }
  
  input[type=checkbox] + label {
      font-family: "Aharoni";
      display: inline-block;
      background: #dcdcdc;
      color: black;
      font-size: 12px;  
      font-weight: 400;
      text-align: center;
      border: solid 1px #a8a8a8;
      border-bottom-color: black;
      border-radius: 0px;
      width: auto;
      height: 20px;
      padding-left:5px;
      padding-right:5px;
      cursor: pointer;    
      position: relative;
  }
  
  input[type=checkbox]:checked + label,
  input[type=checkbox]:active + label {
      background:gray;    
      color:white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" name="test" /&gt;&lt;label&gt;Text goes here&lt;/label&gt;&lt;/input&gt;</code></pre>
  </div>
  </div>
  </p>