Симпатичный чекбокс

by tpew

HTML

<div class="divBox">
    <input type="checkbox" value="1" id="checkboxFourInput"name="" />
    <label for="checkboxFourInput"></label>
</div>

CSS

.divBox {
    width: 20px;
    height: 20px;
    background: #ddd;
    margin: 20px 90px;
    position: relative;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

.divBox label {
    display: block;
    width: 20px;
    height: 20px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 1px;
    z-index: 1;
    /* 
    use this background transparent to check the value of checkbox 
    background: transparent;
    */
    background: Black;
    -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}

.divBox input[type=checkbox]:checked + label {
    background: green;
}