复选框与选中状态下的图像和覆盖图像

Question

我只需要使用CSS的复选框帮助。

首先它的功能正常。但是，当点击按钮时，我想将选中的图像覆盖在未选中图像的顶部。如何实现这一目标？

.frm_checkbox {border: 1px solid red;} 
 

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

 
input#field_32gyuu-0 { 
 
\t background: url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat; 
 
    z-index: 10; 
 
\t content: ""; 
 
\t display: inline-block; 
 
\t font-size: 12px; 
 
\t height: 75px; 
 
\t width: 75px; 
 
\t line-height: 16px; 
 
\t margin: -2px 6px 0 0; 
 
\t text-align: center; 
 
\t vertical-align: middle; 
 
} 
 

 
#frm_checkbox_112-0 input[type="checkbox"]:checked + label:before { 
 
\t background: url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/lightbox-checkmark.png') 0 0px no-repeat; 
 
\t height: 75px; 
 
\t 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

我需要换一个span标签文本，但看看下面的代码。我不确定您是否仍然希望看到复选框，请根据需要拨打display: none。

.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>