Как спровоцировать действие при проверке ввода в SCSS?

Question

Это очень просто, и я просмотрел все эти примеры, но все еще не могу понять, что я делаю неправильно!

Я создал пользовательский флажок, увеличил размер и стиль, и при нажатии на него я хочу, чтобы буква «А» появилась в поле, но она просто не отвечает, возможно, мне поможет вторая пара глаз. определить проблему.

ниже мой HTML и 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>

Вот оно в коде

Answer 1

Вы используете оператор +, что означает «Следующий элемент одного уровня».

Вы должны переместить ярлык после флажка.

<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>