Custom Checkbox

by mtambulut

HTML

<label>
    <input type="checkbox" /> Lorem ipsum
</label>
<label>
    <input type="checkbox" /> Lorem ipsum
</label>
<label>
    <input type="checkbox" /> Lorem ipsum
</label>
<label>
    <input type="checkbox" checked="checked" /> Lorem ipsum
</label>

CSS

input[type='checkbox'] {
    background: #292A2D;
    border: solid 1px #5E6064;
    height: 16px;
    width: 28px;
    position: relative;
    vertical-align: top;
    margin-right: 3px;
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
    -webkit-transition: all 0.5s;
}

input[type='checkbox']:after {
    content: ' ';
    display: block;
    width: 12px;
    height: 12px;
    background: #91949D;
    position: absolute;
    top: 1px;
    left: 13px;
    -webkit-border-radius: 2px;
    -webkit-transition: all 0.5s;
}

input[type='checkbox']:checked {
    border: solid 1px #5BA4D5;
    box-shadow: 0 0 5px #5BA4D5;
}

input[type='checkbox']:checked:after {
    background: #5BA4D5;
    left: 1px;    
}

input {
}

label {
    display: block;
    cursor: pointer;
    margin-bottom: 10px;
}

body {
    background: #3D3F42;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: .8em;
    color: #EBEBF1;
    text-shadow: 0 1px 1px #000;
}