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

Question

我需要关于仅使用 CSS 的复选框的帮助。

首先它运行正常。但是，我想在单击按钮时将选中的图像覆盖在未选中的图像之上。如何做到这一点？

.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

我需要将标签文本包装在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>