This commit is contained in:
xfarrow
2023-10-11 12:37:20 +02:00
parent 0fbe12b5d4
commit 711e6d210a
12 changed files with 165 additions and 147 deletions

View File

@ -59,6 +59,7 @@ input {
}
input[type="text"],
input[type="password"],
input[type="email"] {
width: 100%;
padding: 0 0 0 10px;
@ -75,26 +76,31 @@ input[type="email"] {
background: none;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
border-color: #3ca9e2;
}
input[type="text"]:focus:invalid,
input[type="password"]:focus:invalid,
input[type="email"]:focus:invalid {
color: #cc1e2b;
border-color: #cc1e2b;
}
input[type="text"]:valid ~ .validation,
input[type="password"]:valid ~ .validation,
input[type="email"]:valid ~ .validation {
display: block;
border-color: #0C0;
}
input[type="text"]:valid ~ .validation span,
input[type="password"]:valid ~ .validation span,
input[type="email"]:valid ~ .validation span {
background: #0C0;
position: absolute;
border-radius: 6px;
}
input[type="text"]:valid ~ .validation span:first-child,
input[type="password"]:valid ~ .validation span:first-child,
input[type="email"]:valid ~ .validation span:first-child {
top: 30px;
left: 14px;
@ -104,6 +110,7 @@ input[type="email"]:valid ~ .validation span:first-child {
transform: rotate(-45deg);
}
input[type="text"]:valid ~ .validation span:last-child,
input[type="password"]:valid ~ .validation span:last-child,
input[type="email"]:valid ~ .validation span:last-child {
top: 35px;
left: 8px;

View File

@ -11,13 +11,16 @@
<!-- partial:index.partial.html -->
<div id="login-form-wrap">
<h2>Login</h2>
<form id="login-form">
<form id="login-form" method="POST">
<p>
<input type="text" id="username" name="username" placeholder="Username" required><i class="validation"><span></span><span></span></i>
<input type="email" id="email" name="email" placeholder="Email Address" required><i class="validation"><span></span><span></span></i>
</p>
<p>
<input type="email" id="email" name="email" placeholder="Email Address" required><i class="validation"><span></span><span></span></i>
<input type="password" id="password" name="password" placeholder="Password" required><i class="validation"><span></span><span></span></i>
</p>
<p>
<input type="submit" id="login" value="Login">
</p>