title: Custom checkbox using only CSS and HTML
body: <p>I need to create a custom checkbox using only html and CSS. So far I have:</p>
  
  <p>HTML/CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.checkbox-custom {
    opacity: 0;
    position: absolute;
  }
  .checkbox-custom,
  .checkbox-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
  }
  .checkbox-custom + .checkbox-custom-label:before {
    content: '';
    background: #fff;
    border-radius: 5px;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
  }
  .checkbox-custom:checked + .checkbox-custom-label:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 5px;
    border: solid blue;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    border-radius: 0px;
    margin: 0px 15px 5px 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox"&gt;
    &lt;label for="checkbox-1" class="checkbox-custom-label"&gt;First Choice&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox"&gt;
    &lt;label for="checkbox-2" class="checkbox-custom-label"&gt;Second Choice&lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The <code>checked</code> checkbox should be a checkmark with the square bordered around it instead of just a checkmark. Searching for answers, I have only found cases where the checkmark is displayed using a UTF-8 character or an image. I am not able to use either of these for what I am trying to accomplish. I am only able to use plain CSS and HTML. Any suggestions?</p>
  
  <p>codepen here: <a href="http://codepen.io/alisontague/pen/EPXagW?editors=110">http://codepen.io/alisontague/pen/EPXagW?editors=110</a></p>