用图像替换复选框[重复]答案

【问题标题】：Replacing checkbox with image [duplicate]用图像替换复选框[重复]
【发布时间】：2016-04-20 01:28:51
【问题描述】：

我正在尝试使用图像而不是复选框。当点击它时，它会覆盖图像上的复选标记。这个 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与那个略有不同
这也是你的previous question的副本。

标签： html css forms

【解决方案1】：

您的 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>

【讨论】：