如何在单独的div部分中设置复选框和标签的样式答案

【问题标题】：How to style checkbox where check box and label in separate div sections如何在单独的div部分中设置复选框和标签的样式
【发布时间】：2019-08-05 15:04:13
【问题描述】：

我为复选框和标签创建了单独的 div 部分，我想要样式复选框。当只使用复选框和标签时，它会正常工作，但当添加 div 部分时，它将不起作用。我在这个论坛上尝试了解决方案，但这些解决方案不起作用，请任何人都可以检查并帮助我解决这个问题

How to Checkbox and label style only with CSS Forms, separate div for labels and inputs

.checkbox input[type=checkbox] + .checkmark label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
}

.checkbox input[type=checkbox] {
  display: none;
}
.checkbox  input[type=checkbox] + .checkmark label:before {
  content: "\2714";
  border: 0.1em solid #000;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

.checkbox input[type=checkbox] + .checkmark label:active:before {
  transform: scale(0);
}

.checkbox input[type=checkbox]:checked + .checkmark label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}

.checkbox input[type=checkbox]:disabled + .checkmark label:before {
  transform: scale(1);
  border-color: #aaa;
}

.checkbox input[type=checkbox]:checked:disabled + .checkmark label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}

<div class="checkbox">
    <input type="checkbox" id="fruit1" name="fruit-1" value="Apple">
</div>
  <div>
    <label for="fruit1" class="checklabel">Apple</label>
</div>

【问题讨论】：

在 css 中你的类名是 checkcon 而在 html 中你有 checkbox ??
请先生现在检查一下
你能帮忙吗？

标签： html css

【解决方案1】：

拼写错误 checkcon 到 checbox 或更改某些 HTML 位置

.checkbox input[type=checkbox] +  label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
}

.checkbox input[type=checkbox] {
  display: none;
}
.checkbox  input[type=checkbox] +  label:before {
  content: "\2714";
  border: 0.1em solid #000;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

.checkbox  input[type=checkbox] + label:active:before {
  transform: scale(0);
}

.checkbox  input[type=checkbox]:checked + label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}

.checkbox  input[type=checkbox]:disabled +  label:before {
  transform: scale(1);
  border-color: #aaa;
}

.checkbox  input[type=checkbox]:checked:disabled +  label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}

<div class="checkbox">
    <input type="checkbox" id="fruit1" name="fruit-1" value="Apple">
    <label for="fruit1" class="checklabel">Apple</label>
</div>

【讨论】：

是的，我将 checkcon 更改为 checbox，但我希望将复选框和标签放在单独的部分中
but I want checkbox and label in separate sections需要用到一些jquery
我们无法通过 CSS 实现这一点
We are not able to achieve this through CSS没有

【解决方案2】：

尝试对复选框输入使用相同的类

<input class="checkbox-input" type="checkbox" id="fruit1" name="fruit-1" value="Apple" />

【讨论】：

【解决方案3】：

$('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $(this).parent().addClass("selected");
    } else {
        $(this).parent().removeClass("selected");
    }
});

.checkbox + .checkmark label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
}

.checkbox input[type=checkbox] {
  display: none;
}
.checkbox  + .checkmark label:before {
  content: "\2714";
  border: 0.1em solid #000;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

.checkbox + .checkmark label:active:before {
  transform: scale(0);
}

.checkbox.selected + .checkmark label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}

.checkbox input[type=checkbox] + .checkmark label:active:before {
  transform: scale(0);
}

.checkbox input[type=checkbox]:checked + .checkmark label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="checkbox">
    <input type="checkbox" id="fruit1" name="fruit-1" value="Apple">    </div>
  <div class="checkmark">
    <label for="fruit1" class="checklabel">Apple</label>
</div>

【讨论】：