Hi,

we have one login form which is displayed at the beginning. After the click on the link "Forgot password?" the login form will become the class d-none and removed from the forgot password form.

Now I click on the input field to start typing ... The label is moved to the top and is line through the border of the input field.

Any idea how to fix this?

Screenshot https://www.dropbox.com/s/bgrgu8c2fjjeid9/Screenshot%202021-10-18%20131530.jpg?dl=0

HTML-Code

<section class="py-5 mb-8">
    <div class="container my-5 py-5 ">
        <div class="row justify-content-center">
            <div class="login-box col-xl-5 col-lg-5 col-md-8 text-center pt-5 pb-3 shadow-4 bg-white rounded">
                <div class="ps-5 pe-5 ms-5 me-5">


                        <form method="post" id="login" class="">
                            <h1 class="mb-5 pb-3 text-muted">Login</h1>

                            <div class="alert-wrapper ">
                                                                </div>

                            <div class="form-outline mt-5 mb-4">
                                <input type="email" id="login-name" name="email" class="form-control" required value="">
                                <label class="form-label" for="login-name">Email address</label>
                            </div>

                            <div class="form-outline mb-4">
                                <input type="password" id="login-password" name="password" class="form-control" required>
                                <label class="form-label" for="login-password">Password</label>
                            </div>

                            <div class="d-flex justify-content-between mb-4">
                                <div class="form-check mb-3 mb-md-0">
                                    <input class="form-check-input" type="checkbox" name="rememberme" value="forever" id="login-remember" />
                                    <label class="form-check-label text-muted" for="login-remember">Remember me</label>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between">
                                <div class="col-7 d-flex align-items-center">
                                    <a href="#forgot-password" class="text-muted">Forgot password?</a>
                                </div>

                                <input type="hidden" name="action" value="login">
                                <input type="hidden" name="redirect_to" value="">
                                <input type="hidden" id="_wpnonce" name="_wpnonce" value="3022a5948e" /><input type="hidden" name="_wp_http_referer" value="/login/" />
                                <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                            </div>
                        </form>

                        <form method="post" id="forgot-password" class="d-none">
                            <h1 class="mb-5 pb-3 text-muted">Forgot password</h1>

                            <div class="alert-wrapper ">
                                                                </div>

                            <div class="form-outline mt-5 mb-4">
                                <input type="email" id="login-name" name="email" class="form-control" required>
                                <label class="form-label" for="login-name">Email address</label>
                            </div>

                            <div class="d-flex justify-content-between">
                                <div class="col-6 d-flex align-items-center">
                                    <a href="#login" class="text-muted">Back to login</a>
                                </div>

                                <input type="hidden" name="action" value="forgot_password">
                                <input type="hidden" id="_wpnonce" name="_wpnonce" value="3022a5948e" /><input type="hidden" name="_wp_http_referer" value="/login/" />
                                <button type="submit" class="btn btn-primary btn-block">Reset password</button>
                            </div>
                        </form>



                </div>

                <div class="pt-5">
                    <div class="d-flex justify-content-between mt-5 pt-5 text-muted">
                        <div class="col-7 d-flex align-items-center">
                            <a href="/" class="btn btn-link text-muted text-uppercase"><i class="fas fa-chevron-left"></i>Back to website</a>
                        </div>

                        <a href="/datenschutzerklaerung/" class="btn btn-link text-muted text-uppercase">Private privacy</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>