Reputation: 388
Most likely an easy fix for you guys on here.
I can't figure out how to get ':after' pseudo selector to not affect my checkboxes further down the page thus causing my second set of checkboxes to show an invisible checked state.
I know what's causing my problem, I just can't figure out how to fix it!
It's a rough JSFIDDLE but shows my problem just fine
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 & Recoginition scheme" /><label for="item21_7_checkbox" id="item21_7_label" ><span id="item21_7_span" class="fb-fieldlabel">Reward & 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 & event management" /><label for="item36_1_label" id="item36_1_label" ><span id="item36_1_span" class="fb-fieldlabel">Logisitics & event management</span></label>
<input id="item36_2_checkbox" name="Services_required[]" type="checkbox" value="Conference production & AV" /><label for="item36_2_label" id="item36_2_label" ><span id="item36_2_span" class="fb-fieldlabel">Conference production & 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);
}
Upvotes: 2
Views: 969
Reputation: 14152
you are having this code:
<input id="item36_2_checkbox" name="Services_required[]" type="checkbox" value="Conference production & AV" />
<label for="item36_2_label" id="item36_2_label">
<span id="item36_2_span" class="fb-fieldlabel">Conference production & AV</span>
</label>
Like you did correctly in your previous box the id
of the <input>
have to match the for
attribute of the label. Since you are hiding your checkbox, you need the label to change the checkbox
state on click. You mixed that up.
Fix it like this:
<input id="item36_2_checkbox" name="Services_required[]" type="checkbox" value="Conference production & AV" />
<label for="item36_2_checkbox" id="item36_2_label" >
<span id="item36_2_span" class="fb-fieldlabel">Conference production & AV</span>
</label>
Upvotes: 4