1

I have:

<label class="checkbox-container" for="terms">I agree
                    with the Terms and Conditions</label>
<input class="checkbox required" id="terms" name="terms" type="checkbox">

I want the label's ::before color to change to red, when the error class on input is called. For live preview checkout: http://apespark.com/formifyPro/examples/register.html

I have no idea how to specify this in CSS and design this specific case-scenario.

Denis Saidov
  • 93
  • 1
  • 9
  • I've managed to do it with: label.error + label:before BUT is after that the checkbox is not working. – Denis Saidov Mar 19 '16 at 15:01
  • Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – CBroe Mar 19 '16 at 15:32

1 Answers1

1

Is this what you mean? - JSFiddle

You can use a bit of Javascript to change the style of the label to red if the checkbox hasn't been checked, which I think is what you want, as follows:

html:

<label class="checkbox-container" for="terms" id="termText">I agree
                    with the Terms and Conditions</label>
<input class="checkbox required" id="terms" name="terms" type="checkbox">
<button id="click1">
Submit
</button>

javascript:

document.getElementById("click1").onclick = function checkTerms(){
if((document.getElementById("terms")).checked){

} else{
document.getElementById("termText").style.color = "red";
}
}
Matt Reynolds
  • 457
  • 2
  • 5
  • To avoid the empty block in the `if` statement, negate the case: `if(!(document.getElementById("terms")).checked){`. Then the body contains only the color set statement and needs no `else` clause. – George Cummins Mar 19 '16 at 16:54