So I’m trying to change my form’s label position when I focus on the input so that the label stays ‘in’ the input but moves above the text when writing.

Here is the Form :

 ->add('email', TextType::class, [
                'row_attr' => ['class' => 'form input-box'],
                'label' => 'Adresse Email',
                'label_attr' => ['class' => 'floating-label'],
            ])
->add('username', TextType::class, [
                'row_attr' => ['class' => 'form input-box'],
                'label' => "Nom d'utilisateur",
                'label_attr' => ['class' => 'floating-label'],
                'required' => false
            ])

Here’s the TWIG view :

    <div class="form-wrapper login-register">
        <h1>Inscription</h1>

        {{ form_start(registrationForm) }}

            {{ form_row(registrationForm.email) }}

            {{ form_row(registrationForm.username) }}

            {{ form_row(registrationForm.plainPassword) }}
            
            {{ form_errors(registrationForm) }}
            
            {{ form_row(registrationForm.agreeTerms) }}

            {{ form_widget(registrationForm.valider)}}

        {{ form_end(registrationForm) }}

        <p>Déjà inscrit ? <a class="login-register-link" href="{{ path('app_login')}}" style="font-weight: 700;">Connectez vous</a></p>
    </div>

Here’s the CSS :

    .floating-label {
    color: var(--white);
    position: absolute;
    top: 50%;
        left: 5%;
    transform: translateY(-50%);
        opacity: 0.5;
        pointer-events: none;
    transition: all 250ms ease;
    }

    .input-box > input:focus + .floating-label{
        top: 0;
    transform: translateY(-50%);
    }