CSS ne parvient pas à atteindre une partie spécifique de mon code HTML
J'ai rencontré un problème où je ne pouvais pas accéder à regist-form。目前，它位于表单中，form 的 id 为 regist-method en CSS.
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;
}
J'ai essayé de modifier le CSS de plusieurs manières, mais aucune n'a réussi à faire le travail.
Merci, Bryce
