I am tryinng to make a login but I cant check the checkbox.
I do not have a clue where the problem is. Everything looks right and works, the checkbox is the only thing that does not. I also have not found anything in the web, so it would be really nice if anyone could help me here!
body {
margin: 0;
padding: 0;
background-color: #1a1a1a;
font-family: Georgia, "Times New Roman", Times, serif;
}
.container {
background-color: olive;
height: 500px;
width: 350px;
box-shadow: 10px 10px 10px black;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: auto;
}
.registerdiv {
background-color: rgb(110, 110, 1);
box-shadow: 10px 10px 10px black;
height: 100px;
width: 350px;
margin-left: auto;
margin-right: auto;
}
.header {
padding: 20px;
text-align: center;
padding-top: 40px;
}
.input {
width: 250px;
height: 30px;
background-color: transparent;
border-radius: 20px;
border: 3px solid black;
outline: thin;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 15px;
text-align: center;
margin-top: 20px;
}
::placeholder {
color: rgb(46, 46, 46);
text-align: center;
}
.btn {
width: 255px;
height: 33px;
background-color: black;
color: white;
border-radius: 20px;
border: 3px solid black;
outline: thin;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 15px;
text-align: center;
margin-top: 20px;
}
label {
font-size: 15px;
text-align: center;
display: block;
margin-top: -17px;
margin-left: 30px;
}
.checkbox {
display: block;
margin-left: 120px;
margin-right: auto;
margin-top: 20px;
overflow: hidden;
}
.input:focus {
border: 3px solid rgb(46, 46, 46);
transition: 0.5s;
}
.input:focus::placeholder {
color: transparent;
transition: 0.5s;
}<body>
<div class="container">
<h2 class="header">Sign in</h2>
<form>
<input type="text" class="input" placeholder="What's your username?" required />
<input type="password" class="input" placeholder="What's your password?" required />
<input type="checkbox" class="checkbox" /><label for="checkbox">Remember me</label>
<button class="btn" type="submit">Go ahead</button>
</form>
</div>
<div class="registerdiv"></div>
</body>
Aucun commentaire:
Enregistrer un commentaire