Question

我为复选框和标签创建了单独的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>

Answer 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>

Answer 2

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

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

Answer 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>

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

3 个答案: