Custom checkbox using only CSS and HTML

I need to create a custom checkbox using only html and CSS. So far I have:

HTML:

  <div>
    <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
    <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
  </div>
  <div>
    <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
    <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
  </div>

CSS:

.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;
}

The checked 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?

codepen here: http://ift.tt/1Zf5CST