I'm trying to change the style of my label:before content when the checkbox is selected, unfortunately since im working in drupal i can't change the HTML structure (really, i just cant so please dont provide answers that imply to change the html structure) so i have to find a way to select the label when the checkbox is selected with css3. So far i cant find a level 3 selector that can help me. Here's the html:
<div class="form-type-checkbox form-item-submitted-legal-conditions-1 form-item checkbox">
<label for="edit-submitted-legal-conditions-1">
<input required="required" type="checkbox" id="edit-submitted-legal-conditions-1" name="submitted[legal_conditions][1]" value="1" class="form-checkbox"> I accept the <a class="popup-legal" href="#">legal terms and conditons</a> </label>
</div>
And here's the css:
input {opacity:0;}
.form-item-submitted-legal-conditions-1 > label:before {
float:left;
height:22px;
width:22px;
content:"";
border:1px solid #201747;
display:inline-block;
margin: .2em .5em 0 0;
}
.form-item-submitted-legal-conditions-1 input[type=checkbox].form-checkbox:checked ~ label:before {
background-color: #c8102e;
}
Here's a codepen: