用图像、图标或背景替换复选框并保留功能答案

【问题标题】：replace checkbox with image, icon or background and keep functionality用图像、图标或背景替换复选框并保留功能
【发布时间】：2017-04-09 18:28:02
【问题描述】：

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

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

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

真的无法让它发挥作用。

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>

【问题讨论】：

标签： css forms

【解决方案1】：

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>

【讨论】：

【解决方案2】：

要获得您想要的结果，您需要稍微更改您的 HTML。你不能在 CSS 中选择父母（还）。因此，您应该使用“下一个兄弟选择器”（+）。我通过将其放入span 中隐藏了label 中的文本。选中 input[type="checkbox"] 时，label 会更改背景颜色，使用以下选择器：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>

【讨论】：

不得不做一些额外的改变，但让它工作，谢谢！ jsfiddle.net/99urq40n/1

【解决方案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>

【讨论】：