The problem
You want form inputs with labels that elegantly move above the input when active.
The solution
.form-group {
position: relative;
margin-bottom: 24px;
}
.form-input {
width: 100%;
padding: 16px 12px 8px;
background: #1a1a2e;
border: 2px solid #2a2a4e;
border-radius: 8px;
color: #fff;
font-size: 16px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.form-input:focus {
outline: none;
border-color: #3a7bff;
box-shadow: 0 0 0 3px rgba(58, 123, 255, 0.2);
}
.form-label {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #888;
font-size: 16px;
pointer-events: none;
transition: all 0.3s ease;
background: #1a1a2e;
padding: 0 4px;
}
.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
top: 0;
font-size: 12px;
color: #3a7bff;
}
/* Use placeholder=" " for :placeholder-shown to work */See it live
Put it to work
<div class="form-group">
<input type="email"
class="form-input"
id="email"
placeholder=" "
required>
<label for="email" class="form-label">Email Address</label>
</div>
<div class="form-group">
<input type="password"
class="form-input"
id="password"
placeholder=" "
required>
<label for="password" class="form-label">Password</label>
</div>Worth knowing
Use placeholder=" " (space) to enable the :placeholder-shown selector without showing actual placeholder text.