用图像，图标或背景替换复选框并保持功能

Question

我有一个带复选框的表单。我希望复选框和标签不可见，并用图标替换它们。我希望图标具有复选框的功能。

而不是图标我现在只是使用背景。当我单击背景时，我希望表单更改颜色（通过选中复选框）。当我再次单击时，表单应返回其常规颜色。

在我的真实表单上，复选框应用了一个过滤器，因此我需要复选框功能。

真的无法让它工作。

https://jsfiddle.net/rom6qr84/1/

.form-item-edit-how-40 {
  display: inline-block;
  padding: 20px;
  width: 50px;
  height: 50px;
  background: yellow;
}
.form-item-edit-how-40:active,
.form-item-edit-how-40:hover {
  background: red;
}
input:checked {
  background: green;
}
input,
label {
  //display: none;
  //visibility: hidden;

}
label {
  background: grey;
  width: 50px;
  height: 50px;
}

<div class="form-item-edit-how-40">
  <input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT">
  <label class="option" for="edit-how-40">Met de bus</label>
</div>

Answer 1

为了得到你想要的结果，你需要稍微改变你的HTML。您还不能在CSS中选择父项。因此你应该使用“下一个兄弟选择器”（+）。我将文本隐藏在label中，将其隐藏在span中。当使用以下选择器检查label时，input[type="checkbox"]会更改背景颜色：input:checked + label{}。

.form-item-edit-how-40 {
  display: inline-block;
  padding: 20px;
  background: yellow;
}
.form-item-edit-how-40:active,
.form-item-edit-how-40:hover {
  background: red;
}

input,
label span{
  display: none;
  visibility: hidden;
}
label {
  display: block;
  background: grey;
  width: 50px;
  height: 50px;
}
input:checked + label{
  background: green;
}

<div class="form-item-edit-how-40">
  <input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT">
  <label class="option" for="edit-how-40">
     <span>Met de bus</span>
  </label>
</div>

Answer 2

在CSS.中没有父选择器看到类似的Questions

更改Html代码。看起来像这样。

现场演示Here

片段示例

.form-item-edit-how-40 {
  display: inline-block;
  padding: 20px;
  width: 50px;
  height: 50px;
  background: yellow;
}
.form-item-edit-how-40:hover {
  background: red;
}
input[type="checkbox"]:checked + .form-item-edit-how-40 {
  background: green;
}
input,
label {
  //display: none;
  //visibility: hidden;

}
label {
  background: grey;
  width: 50px;
  height: 50px;
}
c

<input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT" class="test">
<div class="form-item-edit-how-40">
  <label class="option" for="edit-how-40">Met de bus</label>
</div>

Answer 3

我曾经用标签来获得你需要的东西，当然你现在不能在css中得到父母并改变背景。问候和成功编码

.form-item-edit-how-40 {
  display: inline-block;
  padding: 20px;
  width: 50px;
  height: 50px;
  /* background: yellow; */
  position:relative;
  
}

.form-item-edit-how-40:active,
.form-item-edit-how-40:hover {
  /* background: red; */
}
 
input,
label {
   /*display: none;
  visibility: hidden; */
} 

input[type="checkbox"] {
  -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  z-index:-1;
   outline:none;
   background: yellow;
   margin: 0;
}
 
input:checked {
  background: green;
}
input:checked ~ label .fa:before {
    content: "\f111";
}  

label {
/*     background: #808080; */
    position: absolute;
    top: 50%;
    margin-top: -13px;
    left: 50%;
    margin-left: -13px;
    padding: 3px 6px;
    cursor:pointer;
} 

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="form-item-edit-how-40">

  <input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT">
  <label class="option" for="edit-how-40"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
  
</div>