CSS3 custom checkbox just doesn't do anything

Question

So I found a cool css3 checkbox example http://codepen.io/CreativeJuiz/pen/BiHzp

Now I'm trying to apply this to my HTML but just nothing is happening. This is the first time I've tried styling checkboxes and I find it to be a real challenge.

Here is the JSFIDDLE .

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

css:

[type="checkbox"]:not(:checked) + label span,
[type="checkbox"]:checked + label span {
position: relative!important;
padding-left: 25px!important;
cursor: pointer!important;
}


[type="checkbox"]:not(:checked) + label span:before,
[type="checkbox"]:checked + label span:before {
content: ''!important;
position: absolute!important;
left: 0!important top: 2px!important;
width: 17px!important; height: 17px!important;
border: 1px solid #aaa!important;
background: #f8f8f8!important;
border-radius: 3px!important;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)!important;
}


[type="checkbox"]:not(:checked) + label span:after,
[type="checkbox"]:checked + label span:after {
content: '✔'!important;
position: absolute!important;
bottom: 0!important; left: 4px!important;
font-size: 25px!important;
color: #09ad7e!important;
transition: all .5s!important;
}

[type="checkbox"]:not(:checked) + label span:after {
opacity: 0!important;
transform: scale(0)!important;
}

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

[type="checkbox"]:disabled:not(:checked) + label span:before,
[type="checkbox"]:disabled:checked + label span:before {
box-shadow: none!important;
border-color: #bbb!important;
background-color: #ddd!important;
}

[type="checkbox"]:disabled:checked + label span:after {
color: #999!important;
}

[type="checkbox"]:disabled + label span {
  color: #aaa!important;
}

/* accessibility */
[type="checkbox"]:checked:focus + label span:before,
[type="checkbox"]:not(:checked):focus + label span:before {
border: 1px dotted blue!important;
}

Using it on this site: http://www.jimharrison.co.uk/

I've also tried to follow tutorials to get this working and while it roughly makes sense I just can't manage to apply it to my markup! :(

Answer 1

A plus sign (“+”) is used to target an adjacent sibling of an element, essentially, something immediately following something.

In the html you've written, the inputs are children of the labels, so naturally, the css rules utilizing the "adjacent selector" will not apply.

Answer 2

Move your <input> s outside the <label> elements.

You should have a for="" atribute in the <label> to relate for the input #id

Working Demo : http://jsfiddle.net/verber/DwYNC/11/