CSS3 custom checkbox only affects first set of checkboxes

Question

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

JSFIDDLE

HTML:


      Conference
      Incentive campaign
      Incentive travel
      Awards dinner
      Product launch
      Hospitality
     Comms and marketing
      Reward & Recoginition scheme
      Design brief
    


      Free venue finding
      Logisitics & event management
      Conference production & AV
      Exhibition build
      Business travel
      Accomodation
      Print
      Graphic design
      Web development
      Comms and marketing
      Social media
      Consultative

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);
}

Nico O · Accepted Answer

you are having this code:



    Conference production & AV

Like you did correctly in your previous box the id of the 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:



    Conference production & AV

CSS3 custom checkbox only affects first set of checkboxes

Answers (1)

Related Questions