Блог

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

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

ниже приведены мои 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>
 

Вот это в codepen

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

Вы должны переместить метку так, чтобы она находилась после флажка.

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