CODEWITHSUNDEEP
htmlcss
Denis Saidov
Denis Saidov

Reputation: 93

CSS label on input for="" error

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.

Upvotes: 1

Views: 515

Answers (1)

Matt Reynolds
Matt Reynolds

Reputation: 477

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";
}
}

Upvotes: 1

Related Questions