复选框,其中图像和覆盖图像处于选中状态
问题描述:
我只需要使用CSS的复选框的帮助。
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>
答
我需要将标签文本包装在 span
中,但请看下面的代码。我不确定您是否仍然希望看到该复选框,因此请根据需要切换显示:无
。
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>