CSS3 自定义复选框仅影响第一组复选框

Question

很可能对你们来说很容易解决。

我不知道如何让 ':after' 伪选择器不影响页面下方的复选框，从而导致我的第二组复选框显示不可见的选中状态。

我知道是什么导致了我的问题，但我不知道如何解决它！

这是一个粗略的 JSFIDDLE，但很好地显示了我的问题

JSFIDDLE

HTML：

<div class="fb-checkbox">
      <input id="item21_0_checkbox" name="Project_type[]" type="checkbox" data-hint="" value="Conference" /><label for="item21_0_checkbox" id="item21_0_label" ><span id="item21_0_span" class="fb-fieldlabel">Conference</span></label>
      <input id="item21_1_checkbox" name="Project_type[]" type="checkbox" value="Incentive campaign" /><label for="item21_1_checkbox" id="item21_1_label" ><span id="item21_1_span" class="fb-fieldlabel">Incentive campaign</span></label>
      <input id="item21_2_checkbox"  name="Project_type[]" type="checkbox" value="Incentive travel" /><label for="item21_2_checkbox" id="item21_2_label" ><span id="item21_2_span" class="fb-fieldlabel">Incentive travel</span></label>
      <input id="item21_3_checkbox" name="Project_type[]" type="checkbox" value="Awards dinner" /><label for="item21_3_checkbox" id="item21_3_label" ><span id="item21_3_span" class="fb-fieldlabel">Awards dinner</span></label>
      <input id="item21_4_checkbox" name="Project_type[]" type="checkbox" value="Product launch" /><label for="item21_4_checkbox" id="item21_4_label" ><span id="item21_4_span" class="fb-fieldlabel">Product launch</span></label>
      <input id="item21_5_checkbox" name="Project_type[]" type="checkbox" value="Hospitality" /><label for="item21_5_checkbox" id="item21_5_label" ><span id="item21_5_span" class="fb-fieldlabel">Hospitality</span></label>
     <input id="item21_6_checkbox" name="Project_type[]" type="checkbox" value="Comms and marketing" /><label for="item21_6_checkbox" id="item21_6_label" ><span id="item21_6_span" class="fb-fieldlabel">Comms and marketing</span></label>
      <input id="item21_7_checkbox" name="Project_type[]" type="checkbox" value="Reward &amp; Recoginition scheme" /><label for="item21_7_checkbox" id="item21_7_label" ><span id="item21_7_span" class="fb-fieldlabel">Reward &amp; Recoginition scheme</span></label>
      <input id="item21_8_checkbox" name="Project_type[]" type="checkbox" value="Design brief" /><label for="item21_8_checkbox" id="item21_8_label"><span id="item21_8_span" class="fb-fieldlabel">Design brief</span></label>
    </div>

<div class="fb-checkbox">
      <input id="item36_0_checkbox" name="Services_required[]" type="checkbox" data-hint="" value="Free venue finding" /><label for="item36_0_label" id="item36_0_label" ><span id="item36_0_span" class="fb-fieldlabel">Free venue finding</span></label>
      <input id="item36_1_checkbox" name="Services_required[]" type="checkbox" value="Logisitics &amp; event management"  /><label for="item36_1_label" id="item36_1_label" ><span id="item36_1_span" class="fb-fieldlabel">Logisitics &amp; event management</span></label>
      <input id="item36_2_checkbox" name="Services_required[]" type="checkbox" value="Conference production &amp; AV"  /><label for="item36_2_label" id="item36_2_label" ><span id="item36_2_span" class="fb-fieldlabel">Conference production &amp; AV</span></label>
      <input id="item36_3_checkbox" name="Services_required[]" type="checkbox" value="Exhibition build"  /><label for="item36_3_label" id="item36_3_label" ><span id="item36_3_span" class="fb-fieldlabel">Exhibition build</span></label>
      <input id="item36_4_checkbox" name="Services_required[]" type="checkbox" value="Business travel"  /><label for="item36_4_label" id="item36_4_label" ><span id="item36_4_span" class="fb-fieldlabel">Business travel</span></label>
      <input id="item36_5_checkbox" name="Services_required[]" type="checkbox" value="Accomodation"  /><label for="item36_5_label" id="item36_5_label" ><span id="item36_5_span" class="fb-fieldlabel">Accomodation</span></label>
      <input id="item36_6_checkbox" name="Services_required[]" type="checkbox" value="Print" /><label for="item36_6_label" id="item36_6_label" ><span id="item36_6_span" class="fb-fieldlabel">Print</span></label>
      <input id="item36_7_checkbox" name="Services_required[]" type="checkbox" value="Graphic design"  /><label for="item36_7_label" id="item36_7_label" ><span id="item36_7_span" class="fb-fieldlabel">Graphic design</span></label>
      <input id="item36_8_checkbox" name="Services_required[]" type="checkbox" value="Web development"  /><label for="item36_8_label"  id="item36_8_label" ><span id="item36_8_span" class="fb-fieldlabel">Web development</span></label>
      <input id="item36_9_checkbox" name="Services_required[]" type="checkbox" value="Comms and marketing"  /><label for="item36_9_label" id="item36_9_label" ><span id="item36_9_span" class="fb-fieldlabel">Comms and marketing</span></label>
      <input id="item36_10_checkbox" name="Services_required[]" type="checkbox" value="Social media"  /><label for="item36_10_label" id="item36_10_label" ><span id="item36_10_span" class="fb-fieldlabel">Social media</span></label>
      <input id="item36_11_checkbox" name="Services_required[]" type="checkbox" value="Consultative"  /><label for="item36_11_label" id="item36_11_label" ><span id="item36_11_span" class="fb-fieldlabel">Consultative</span></label>
</div>

CSS：

.fb-checkbox {
    margin-top: 20px;    
}

input[type="checkbox"] {
    display: none!important;
}

label + span {
    display:block;
}


input[type="checkbox"]:not(:checked) + label span,
input[type="checkbox"]:checked + label span {
    position: relative;
    cursor: pointer;
}


input[type="checkbox"]:not(:checked) + label span:before,
input[type="checkbox"]:checked + label span:before {
    content: '';
    position: absolute;
    right: 10px;
    width: 14px; height: 14px;
    border: 1px solid #a5a5b1;
    background: none;
    border-radius: 3px;
    -webkit-box-shadow: inset 0px 0px 8px 0px rgba(50, 50, 50, 0.2);
    -moz-box-shadow:    inset 0px 0px 8px 0px rgba(50, 50, 50, 0.2);
    box-shadow:         inset 0px 0px 8px 0px rgba(50, 50, 50, 0.2);
}

input[type="checkbox"]:not(:checked) + label span:after,
input[type="checkbox"]:checked + label span:after {
    content: '★';
    position: absolute;
    top: -5px;
    right: 10px;
    font-size: 20px;
    color: #ffc20e;
    transition: all .5s;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: inset 0px 0px 8px 0px rgba(50, 50, 50, 0.01);
    -moz-box-shadow:    inset 0px 0px 8px 0px rgba(50, 50, 50, 0.01);
    box-shadow:         inset 0px 0px 8px 0px rgba(50, 50, 50, 0.01);
    opacity: 0;
    transform: scale(0);
}

/*---- This seems to be causing my problem but I need it in -----*/
input[type="checkbox"]:not(:checked) + label span:after {
    opacity: 0;
    transform: scale(0);
}

input[type="checkbox"]:checked + label span:after {
    opacity: 1;
    transform: scale(1);
}

Answer 1

你有这个代码：

<input id="item36_2_checkbox" name="Services_required[]" type="checkbox" value="Conference production &amp; AV"  />
<label for="item36_2_label" id="item36_2_label">
    <span id="item36_2_span" class="fb-fieldlabel">Conference production &amp; AV</span>
</label>

就像您在上一个框中所做的那样，<input> 的 id 必须与标签的 for 属性匹配。由于您隐藏了复选框，因此您需要标签来更改点击时的checkbox 状态。你把它弄混了。

像这样修复它：

<input id="item36_2_checkbox" name="Services_required[]" type="checkbox" value="Conference production &amp; AV"  />
<label for="item36_2_checkbox" id="item36_2_label" >
    <span id="item36_2_span" class="fb-fieldlabel">Conference production &amp; AV</span>
</label>