lundi 11 janvier 2016

Checkbox image overlay

.gchoice_1_1_3 {border: 1px solid red;}

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

.gchoice_1_1_3 input[type="checkbox"] + label:before {
        background: url('http://ift.tt/1OLyf8A') 0 0px no-repeat;
    z-index: 10;
        content: "";
        display: inline-block;
        font-size: 12px;
        height: 75px;
        width: 75px;
        line-height: 16px;
        margin: -2px 6px 0 0;
        text-align: center;
        vertical-align: middle;
        positionL relative;
        border-radius: 10px;
        background-color: #6283B2;
}

.gchoice_1_1_3 input[type="checkbox"]:checked + label:before {
        background: url('http://ift.tt/1PSQ2tD') 0 0px no-repeat;
        height: 75px;
        width: 75px;
        border-radius: 10px;
        background-color: #37924A;
}
<li class='gchoice_1_1_3'>
     <input name='input_1.3' type='checkbox'  value='Christmas Lights'  id='choice_1_1_3' tabindex='22'  />
     <label for='choice_1_1_3' id='label_1_1_3'>Christmas Lights</label>
</li>

Happy belated new year!!!

Need help for checkbox pure css. No JS.

First of all it works fine. Hover, I want to overlay the checked image on top of the unchecked image when the button is clicked. How to achieve this please?

CSS

.gchoice_1_1_3 {border: 1px solid red;}

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

.gchoice_1_1_3 input[type="checkbox"] + label:before {
    background: url('http://ift.tt/1OLyf8A') 0 0px no-repeat;
    z-index: 10;
    content: "";
    display: inline-block;
    font-size: 12px;
    height: 75px;
    width: 75px;
    line-height: 16px;
    margin: -2px 6px 0 0;
    text-align: center;
    vertical-align: middle;
    positionL relative;
    border-radius: 10px;
    background-color: #6283B2;
}

.gchoice_1_1_3 input[type="checkbox"]:checked + label:before {
    background: url('http://ift.tt/1PSQ2tD') 0 0px no-repeat;
    height: 75px;
    width: 75px;
    border-radius: 10px;
    background-color: #37924A;
}

<li class='gchoice_1_1_3'>
     <input name='input_1.3' type='checkbox'  value='Christmas Lights'  id='choice_1_1_3' tabindex='22'  />
     <label for='choice_1_1_3' id='label_1_1_3'>Christmas Lights</label>
</li>




Aucun commentaire:

Enregistrer un commentaire