How to create Checkbox with label on the left and styling

Question

I've seen a visual design like below:

basically it is a checkbox (with label on the left, and styled border and all...) works as a filter. I don't wanna reinvent the wheels but after half-day googling I found nothing fit or near to this design. First obstacle is move the label to the left which is normally on the right. Furthermore, the styling is pretty painful if using pure CSS.

So I would ask your help on this, would you please provide some idea? any idea will be helpful. Thanks in advance!

Answer 1

I think this comes pretty close to your screenshot. Here's a fiddle as well.

body {
    font-family: sans-serif;
}

input[type="checkbox"] {
    display: none;
}

.checkbox {
    position: relative;
    display: inline-block;
    border: 1px solid #aaa;
    padding: 10px 52px 8px 12px;
    border-radius: 5px;
    color: #888;
    font-weight: 100;
    cursor: pointer;
    margin-bottom: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox::before {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 37px;
    width: 1px;
    background-color: #aaa;
}

.checkbox::after {
    position: absolute;
    top: 0px;
    right: 0px;
    content: '';
    float: left;
    width: 26px;
    height: 26px;
    margin: 4px;
    border: 1px dashed #aaa;
    border-radius: 3px;
    background-image: url(http://dev.instinkt.dk/checkmark.png);
    background-size: 26px 52px;
    background-position: center top;
    background-repeat: no-repeat;
}

input[type="checkbox"]:checked + .checkbox {
    border: 1px solid #4575ab;
    color: #4575ab;
}

input[type="checkbox"]:checked + .checkbox::before {
    background-color: #4575ab;
}

input[type="checkbox"]:checked + .checkbox::after {
    border: 1px solid #4575ab;
    background-color: #4575ab;
    background-position: center bottom;
}

<input id="mycheckbox1" type="checkbox">
<label class="checkbox" for="mycheckbox1">Custom checkbox</label>
<br>
<input id="mycheckbox2" type="checkbox" checked>
<label class="checkbox" for="mycheckbox2">Custom checkbox</label>