CODEWITHSUNDEEP
htmlcheckboxsass
felixo
felixo

Reputation: 1613

How to instigate action when input is checked in SCSS?

Its very simply and I have looked at all these examples but still am not able to figure out what I am doing wrong!

I have created a custom checkbox, increased the size and style, and when it is clicked I want the letter "A" to appear in the box, but it simply will not respond, maybe a second pair of eyes will help me identify the problem.

below is my html and css: 

.container {
    position: relative;
    cursor: pointer;
    display: block;

    input,
    label {
        display: inline-block;
    }

    input {
        // opacity: 0;
        position: absolute;
        height: unset;
        width: unset;
        cursor: pointer;
    }

    label::before {
        border: 1px solid #333;
        content: "";
        display: inline-block;
        font: 16px/1em sans-serif;
        height: 50px;
        margin: 0 .25em 0 0;
        padding: 0;
        vertical-align: top;
        width: 50px;
        border-radius: 5px;
        color: red;
        font-size: 50px;
        padding: 10px;
    }

    input[type="checkbox"]:checked + label::before {
        content: "A"; //code for checked
    }
}

<div class="container">
    <div>
        <label for="form_agreeTerms" class="required">Agree terms</label>
        <input type="checkbox" id="form_agreeTerms" name="form[agreeTerms]" required="required" value="1">          
    </div>
</div>

Here it is in codepen

Upvotes: 0

Views: 53

Answers (1)

user3804427
user3804427

Reputation: 442

You using the + operator, which means "The next sibling element".

You must move the label to be after the checkbox.

<div class="container">
    <div>
        <input type="checkbox" id="form_agreeTerms" name="form[agreeTerms]" required="required" value="1">   
        <label for="form_agreeTerms" class="required">Agree terms</label>       
    </div>
</div>

Upvotes: 1

Related Questions