Question

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

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

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

无法真正使用它。

.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

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 2

要获得您想要的结果，您需要稍微更改一下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 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>

将复选框替换为图像，图标或背景并保留功能

3 个答案: