I ran into a problem where I couldn't access regist-form
in CSS. Currently, it's in a form with the id
of 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've tried editing the CSS in multiple ways, but none of them have successfully done the job.
Thank you, Bryce
I don't see any
regist-method
styles in your CSS, but you can access it from your CSS like this: