Clicking label doesn't check my input field - html

Question

I'm using the following code. The checkbox doesn't want to be checked with the style I gave it.
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<div class="checkbox">
<input name="remember" type="checkbox" ><label>Wachtwoord onthouden</label>
</div>
</div>
</div>'
And css:
col-md-4.control-label, #email, #password {
margin: 20px auto;
width: 300px;
resize: none;
font-family: 'Exo 2', sans-serif;
font-size: 1em;
outline: none;
}
.btn.btn-link, .checkbox {
display: block;
margin-top:20px;
margin-bottom:20px;
color: $white;
}
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0; top: 2px;
width: 17px; height: 17px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '✔';
position: absolute;
top: 3px; left: 4px;
font-size: 18px;
line-height: 0.8;
color: $background_color_green;
transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
It's pretty weird since I use the exact same style for some other part on the website, but it does work on there. It should work on both this part as that part, right?

Answer 1

You'll have to assign the label to the correct input, so either use the for attribute, or place your label around the input, (but that would break your current CSS code).
The following HTML should produce the desired result.
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<div class="checkbox">
<input id="remember" name="remember" type="checkbox" ><label for="remember">Wachtwoord onthouden</label>
</div>
</div>
</div>