复选框，其中图像和覆盖图像处于选中状态

Question

I need help for checkbox using CSS only.

First of all it function correctly. However, I want to overlay the checked image on top of the unchecked image when the button is clicked. How to achieve this?

 .frm_checkbox {border: 1px solid red;} .frm_checkbox input[type="checkbox"] {display: none; } input#field_32gyuu-0 { background: url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/christmasLights.png') 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; } #frm_checkbox_112-0 input[type="checkbox"]:checked + label:before { background: url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/lightbox-checkmark.png') 0 0px no-repeat; height: 75px; width: 75px; } 

 <div id="frm_field_162_container" class="frm_form_field form-field form-group frm_top_container"> <label class="frm_primary_label control-label">Checkboxes <span class="frm_required"></span> </label> <div class="frm_opt_container"> <div class="frm_checkbox checkbox" id="frm_checkbox_162-0"> <label for="field_32gyuu-0"> <input type="checkbox" name="item_meta[162][]" id="field_32gyuu-0" value="Option 1" /> Option 1</label> </div> <div class="frm_checkbox checkbox" id="frm_checkbox_162-1"> <label for="field_32gyuu-1"> <input type="checkbox" name="item_meta[162][]" id="field_32gyuu-1" value="Option 2" /> Option 2</label> </div> </div> </div> 

Answer 1

I needed to wrap the label text in a span , but take a look at the code below. I wasn't sure if you still wanted to see the checkbox, so toggle display: none as required.

 .checkbox label { position: relative; display: table; margin-bottom: 15px; padding-left: 80px; height: 75px; background-color: #eee; } .checkbox label > span { display: table-cell; vertical-align: middle; } .checkbox label > span:before { content: url("http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/christmasLights.png"); position: absolute; top: 0; left: 0; width: 75px; height: 75px; } [type="checkbox"] { display: none; margin-top: 31px; } [type="checkbox"]:checked + span:before { content: url("http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/lightbox-checkmark.png"); } 

 <div id="frm_field_162_container" class="frm_form_field form-field form-group frm_top_container"> <label class="frm_primary_label control-label">Checkboxes <span class="frm_required"></span> </label> <div class="frm_opt_container"> <div class="frm_checkbox checkbox" id="frm_checkbox_162-0"> <label for="field_32gyuu-0"> <input type="checkbox" name="item_meta[162][]" id="field_32gyuu-0" value="Option 1" /> <span>Option 1</span> </label> </div> <div class="frm_checkbox checkbox" id="frm_checkbox_162-1"> <label for="field_32gyuu-1"> <input type="checkbox" name="item_meta[162][]" id="field_32gyuu-1" value="Option 2" /> <span>Option 2</span> </label> </div> </div> </div>