我正在尝试使用图像而不是复选框。 单击时,它会在图像上覆盖复选标记。 这个 html 是强大的专业人士的自动生成,因此我试图用 css 做到这一点。
谢谢你的帮助。
#frm_checkbox_83-0 {border: 1px solid red;}
#frm_checkbox_83-0 input[type="checkbox"] {display: none; }
#frm_checkbox_83-0 input[type="checkbox"] {
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;
position: relative;
border-radius: 10px;
background-color: #6283B2;
}
#frm_checkbox_83-0 input[type="checkbox"]:checked {
background: url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/checkmark.png'), url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
height: 75px;
width: 75px;
border-radius: 10px;
background-color: #37924A;
}
<div class="frm_opt_container">
<div class="frm_checkbox" id="frm_checkbox_83-0">
<label for="field_a8mjgv-0">
<input type="checkbox" name="item_meta[83][]" id="field_a8mjgv-0" value="Option 1"/> Option 1
</label>
</div>
<div class="frm_checkbox" id="frm_checkbox_83-1">
<label for="field_a8mjgv-1">
<input type="checkbox" name="item_meta[83][]" id="field_a8mjgv-1" value="Option 2"/> Option 2
</label>
</div>
</div>
HTML 排序中似乎存在一些问题(将复选框输入移到标签外部和之前)
使用 css 定位标签和复选框,同时保持复选框处于隐藏状态。
#frm_checkbox_83-0 {
border: 1px solid red;
}
#frm_checkbox_83-0 input[type="checkbox"] {
display: none;
}
#frm_checkbox_83-0 input[type="checkbox"] + label {
content: "";
background: url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
display: inline-block;
font-size: 12px;
height: 75px;
width: 75px;
margin: -2px 6px 0 0;
text-align: center;
vertical-align: middle;
border-radius: 10px;
background-color: #6283B2;
}
#frm_checkbox_83-0 input[type="checkbox"]:checked + label {
background: url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/checkmark.png'), url('http://www.uswebcompany.com/plugins/formidable/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
height: 75px;
width: 75px;
border-radius: 10px;
background-color: #37924A;
}
<div class="frm_opt_container">
<div class="frm_checkbox" id="frm_checkbox_83-0">
<input type="checkbox" name="item_meta[83][]" id="field_a8mjgv-0" value="Option 1" />
<label for="field_a8mjgv-0">
Option 1
</label>
</div>
<div class="frm_checkbox" id="frm_checkbox_83-1">
<label for="field_a8mjgv-1">
<input type="checkbox" name="item_meta[83][]" id="field_a8mjgv-1" value="Option 2" />Option 2
</label>
</div>
</div>