0

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:

codepen code

Lowtrux
  • 562
  • 2
  • 7
  • 28
  • 1
    Without JavaScript this is impossible. – David says reinstate Monica Dec 07 '15 at 11:25
  • 2
    Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – David says reinstate Monica Dec 07 '15 at 11:26
  • its a hack instead of using `label` `pseudo` element i am using `a` `pseudo` element which will give the same effect if `a` tag is not there it will not work http://codepen.io/victorfdes/pen/KVwdbp – Vitorino fernandes Dec 07 '15 at 11:44
  • i want to change the style to the label:before tag @vitorino – Lowtrux Dec 07 '15 at 12:05
  • (…) based on the state of its descendant: you can't in CSS. Edit: you could if input was the preceding sibling of label, like `input:checked + label:before` but as you stated that you can't modify HTML code, you should rely on JS instead. Good example with accessibility and progressive enhancement/graceful degradation in mind: http://filamentgroup.github.io/checkboxradio/ – FelipeAls Dec 07 '15 at 12:06
  • thanks for your answer @FelipeAls, i will have to use jquery yeah. – Lowtrux Dec 07 '15 at 12:09
  • This is not working for me, nothing happens when i click on the checkbox: $('label:has(input[type=checkbox]:checked)').addClass('input-force-style'); Any ideas whats going on ? – Lowtrux Dec 07 '15 at 12:32
  • this is the HTML structure, i'm trying to select the input:checked, so i guess the label tag is the parent of the input not the previous sibling, am i wrong ? – Lowtrux Dec 07 '15 at 12:48
  • You are completely right. I misread the code :$ – Alvaro Montoro Dec 07 '15 at 14:10

0 Answers0