.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