1

I'd like to make the element with the class "checkmark" appearing when I check the checkbox. The checkbox is inside the div tag with the class "form-check". This one is generated by Symfony so I can not move inside my checkmark tag as I wanted to. So obviously, the CSS code .form-check-input:checked ~ .checkmark:after {display: block;} is not working, because the checkmark has to be inside the same tag than in input type="checkbox".

Do you have an idea how I can reach .checkmark in CSS ? How can make the checkmark element appearing when checkbox is checked in this case ?

This is my HTML.twig file

{% extends 'base.html.twig' %}

{% block title %}Incris-toi !{% endblock %}

{% block main %}

<main class="form container">

    <header></header>

    {{form_start(userform)}}

        <div class="formpage page1">
            <div class="form-floating mb-3">
                {{form_widget(userform.email, {'attr' : {'placeholder' : 'Mon adresse e-mail', 'class' : 'form-control'}})}}
                {{form_label(userform.email, 'Mon adresse e-mail', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating mb-3">
                {{form_widget(userform.password.first, {'attr' : {'placeholder' : 'Mon mot de passe', 'class' : 'form-control'}})}}
                {{form_label(userform.password.first, 'Mon mot de passe', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating">
                {{form_widget(userform.password.second, {'attr' : {'placeholder' : 'Confirmation de mon mot de passe', 'class' : 'form-control'}})}}
                {{form_label(userform.password.second, 'Confirmation de mon mot de passe', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-checkbox">
                {{form_widget(userform.roles)}}
                <span class="checkbox"></span>
                <span class="checkmark"></span>
            </div>
            <button type="button" class="btn btn-lg btn-outline-primary mt-4 d-flex mx-auto">Je m'inscris</button>
        </div>

    {{form_end(userform)}}

</main>

{% endblock %}

This is a picture of what we can see in the navigator : HTML rendering

This is my CSS file

.form-checkbox {
    margin-top: 35px;
}

.form-check-label {
    margin-left: 10px;
}

.form-checkbox{
    display: block;
    position: relative;
}

.form-check-input {
    position: absolute;
    height: 24px;
    width: 24px;
    opacity: 0;
    cursor: pointer;
}

.checkbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    border: 1px solid #FF5A00;
    border-radius: 4px;
    z-index: -2;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    border: 1px solid #FF5A00;
    border-radius: 4px;
    z-index: -1;
    display: none;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.form-check-input:checked ~ .checkmark:after {
    display: block;
}

.checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #FF5A00;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
Emilie Tossan
  • 127
  • 1
  • 1
  • 16

1 Answers1

1

This is only possible in CSS with the new :has selector.

However, this has quite a small browser compatibility coverage at the moment.

.target:after {
  content: 'checkbox is not checked';
}

.container:has(input:checked) ~ .target:after {
  content: 'checkbox is checked and :has() selector is available';
}
<div class="container">
  <input type="checkbox">
</div>

<div class="target"></div>
Dan Carter
  • 433
  • 2
  • 9