CSS cannot reach a certain part of my HTML code

April 1, 2023

I have came across a problem, that in CSS I cannot reach regist-form. Currently, it is located in a form, with the id for the form being regist-method.

HTML:

<div class="wrapper">
        <form method="post" id="login-method">
            <div class="login-form">
                <h2>Bejelentkezés</h2>
                    <div class="input">
                        <span class="icon"><i class="fa-solid fa-at"></i></span>
                        <input type="email" required>
                        <label>E-mail</label>
                    </div>
    
                    <div class="input">
                        <span class="icon"><i class="fa-solid fa-key"></i></span>
                        <input type="password" required>
                        <label>Jelszó</label>
                    </div>
    
                    <div class="remember-forgot">
                        <label><input type="checkbox">Emlékezz rám | </label><a href="#">Elfelejtetted a jelszavad?</a>
                    </div>
    
                    <button type="submit" class="btn" form=login-method>Belépés</button>
    
                    <div class="login-regist">
                        <p>Még nincs fiókod? <a href="#" class="regist-link">Regisztrálj!</a></p>
                    </div>
            </div>
        </form>

        <form method="post" id="regist-method">
            <div class="regist-form">
                <h2>Regisztráció</h2>
                <?php
                    if (isset($error)) {
                        foreach ($error as $error){
                            echo '<span class="error-msg">'.$error.'</span>';
                        };
                    };
                ?>
                    <div class="input">
                        <span class="icon"><i class="fa-solid fa-signature"></i></span>
                        <input type="text" name="nev_regist" required>
                        <label>Név</label>
                    </div>

                    <div class="input">
                        <span class="icon"><i class="fa-solid fa-at"></i></span>
                        <input type="email" name="email_regist" required>
                        <label>E-mail</label>
                    </div>

                    <div class="input">
                        <span class="icon"><i class="fa-solid fa-key"></i></span>
                        <input type="password" name="pass_regist" required>
                        <label>Jelszó</label>
                    </div>

                    <div class="input">
                        <span class="icon"><i class="fa-solid fa-key"></i></span>
                        <input type="password" name="pass2_regist" required>
                        <label>Jelszó újra</label>
                    </div>

                    <div class="aszf">
                        <label><input type="checkbox" name="aszf_regist">ÁSZF elfogadása</label>
                    </div>

                    <button type="submit" class="btn" name="submit">Regisztráció</button>

                    <div class="login-regist">
                        <p>Van már fiókod? <a href="#" class="login-link">Jelentkezz be!</a></p>
                    </div>
            </div>
        </form>
    </div>

CSS:

.wrapper {
    position: fixed;
    top: 33%;
    left: 42.5%;
    margin-top: -100px;
    margin-left: -100px;
    width: 450px;
    height: 400px;
    background: transparent;
    border: 2px solid #3A3B3C;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 30px black;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    animation: fadeIn 1s;
    transition: height .2s ease;
}

.wrapper.active {
    height: 520px;
}

.wrapper .login-form {
    padding: 40px;
    transition: transform .18s ease;
    transform: translateX(0);
}

.wrapper.active .login-form {
    transition: none;
    transform: translateX(-400px);
}

.wrapper #regist-method {
    position: absolute;
    transition: none;
    transform: translateX(400px);
}

.wrapper.active #regist-method {
    padding: 40px;
    transition: transform .18s ease;
    transform: translateX(0);
}

.login-form h2 {
    font-size: 2em;
    color: #3A3B3C;
    text-align: center;
}

#regist-method h2 {
    font-size: 2em;
    color: #3A3B3C;
    text-align: center;
}

.input {
    position: relative;
    width: 100%;
    height: 28px;
    border-bottom: 2px solid #3A3B3C;
    margin: 30px 0;
    margin-left: 5px;
    font-size: medium;
}

.input label {
    position: absolute;
    margin-top: 15px;
    left: 5px;
    transform: translateY(-50%);
    font-size: 1em;
    color: #3A3B3C;
    font-weight: 500;
    pointer-events: none;
    transition: .5s;
}

.input input:focus~label,
.input input:valid~label {
    top: -23px;
}

.input input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: #3A3B3C;
    font-weight: 600;
    padding: 0 35px 0 5px;
}

.input .icon {
    position: absolute;
    margin-top: -15px;
    right: 8px;
    font-size: 1.2em;
    color: #3A3B3C;
    line-height: 57px;
}

.remember-forgot {
    font-size: .9em;
    color: #3A3B3C;
    font-weight: 500;
    margin: -15px 0 15px;
    text-align: center;
}

.aszf {
    font-size: .9em;
    color: #3A3B3C;
    font-weight: 500;
    margin: -15px 0 15px;
    text-align: center;
}

.remember-forgot label input {
    accent-color: #3A3B3C;
}

.aszf label input {
    accent-color: #3A3B3C;
}

.remember-forgot a {
    color: #3A3B3C;
    text-decoration: none;
    font-weight: 600;
}

.aszf a {
    color: #3A3B3C;
    text-decoration: none;
    font-weight: 600;
}

.remember-forgot a:hover {
    text-decoration: underline;
}

.btn {
    width: 100%;
    height: 45px;
    background: #3A3B3C;
    border: none;
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    color: white;
    font-weight: 500;
    margin-top: 7px;
}

.login-regist {
    font-size: .9em;
    color: #3A3B3C;
    text-align: center;
    font-weight: 500;
    margin: 25px 0 10px;
}

.login-regist p a {
    color: #3A3B3C;
    text-decoration: none;
    font-weight: 600;
}

.login-regist p a:hover {
    text-decoration: underline;
}

.wrapper form .error-msg {
    margin: 10px 0;
    display: block;
    background: crimson;
    color: white;
    border-radius: 20px;
    font-size: 20px;
}

I have tried editing the CSS in many ways, none of those managed to do the work successfully.

Thank you,
Blaise

>Solution :

In your css i don’t see any style for regist-method, but you can reach from you css like that:

 .wrapper #regist-method .regist-form{
     display: block;
     background-color: darkcyan;
 }

       .wrapper {
    position: fixed;
    top: 33%;
    left: 42.5%;
    margin-top: -100px;
    margin-left: -100px;
    width: 450px;
    height: 400px;
    background: transparent;
    border: 2px solid #3A3B3C;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 30px black;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    animation: fadeIn 1s;
    transition: height .2s ease;
}

.wrapper.active {
    height: 520px;
}


.wrapper #regist-method .regist-form{
    display: block;
    background-color: darkcyan;
}

.wrapper #regist-method {
    position: absolute;
}

.wrapper.active #regist-method {
    padding: 40px;
    transition: transform .18s ease;
    transform: translateX(0);
}


#regist-method h2 {
    font-size: 2em;
    color: #3A3B3C;
    text-align: center;
}

.input {
    position: relative;
    width: 100%;
    height: 28px;
    border-bottom: 2px solid #3A3B3C;
    margin: 30px 0;
    margin-left: 5px;
    font-size: medium;
}

.input label {
    position: absolute;
    margin-top: 15px;
    left: 5px;
    transform: translateY(-50%);
    font-size: 1em;
    color: #3A3B3C;
    font-weight: 500;
    pointer-events: none;
    transition: .5s;
}

.input input:focus~label,
.input input:valid~label {
    top: -23px;
}

.input input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: #3A3B3C;
    font-weight: 600;
    padding: 0 35px 0 5px;
}

.input .icon {
    position: absolute;
    margin-top: -15px;
    right: 8px;
    font-size: 1.2em;
    color: #3A3B3C;
    line-height: 57px;
}

.remember-forgot {
    font-size: .9em;
    color: #3A3B3C;
    font-weight: 500;
    margin: -15px 0 15px;
    text-align: center;
}

.aszf {
    font-size: .9em;
    color: #3A3B3C;
    font-weight: 500;
    margin: -15px 0 15px;
    text-align: center;
}

.remember-forgot label input {
    accent-color: #3A3B3C;
}

.aszf label input {
    accent-color: #3A3B3C;
}

.remember-forgot a {
    color: #3A3B3C;
    text-decoration: none;
    font-weight: 600;
}

<div class="wrapper">
        <form method="post" id="regist-method">
            <div class="regist-form">
                <h2>Regisztráció</h2>
                <?php
                    if (isset($error)) {
                        foreach ($error as $error){
                            echo '<span class="error-msg">'.$error.'</span>';
                        };
                    };
                ?>
                    <div class="input">
                        <span class="icon"><i class="fa-solid fa-signature"></i></span>
                        <input type="text" name="nev_regist" required>
                        <label>Név</label>
                    </div>

                    <div class="input">
                        <span class="icon"><i class="fa-solid fa-at"></i></span>
                        <input type="email" name="email_regist" required>
                        <label>E-mail</label>
                    </div>

                    <div class="input">
                        <span class="icon"><i class="fa-solid fa-key"></i></span>
                        <input type="password" name="pass_regist" required>
                        <label>Jelszó</label>
                    </div>

                    <div class="input">
                        <span class="icon"><i class="fa-solid fa-key"></i></span>
                        <input type="password" name="pass2_regist" required>
                        <label>Jelszó újra</label>
                    </div>

                    <div class="aszf">
                        <label><input type="checkbox" name="aszf_regist">ÁSZF elfogadása</label>
                    </div>

                    <button type="submit" class="btn" name="submit">Regisztráció</button>

                    <div class="login-regist">
                        <p>Van már fiókod? <a href="#" class="login-link">Jelentkezz be!</a></p>
                    </div>
            </div>
        </form>
    </div>

Remélem tudtam segíteni, pacsi 🙂