I have turned a "classic" Bootstrap form into a "floating labels" form.
For this purpose, I had to move the labels below the form controls.
.form-control:focus {
box-shadow: none !important;
border-color: #c4c4c4 !important;
}
.with-floating-label {
position: relative;
}
.with-floating-label label {
position: absolute;
top: 10px;
padding: 0 3px;
background: #fff;
left: 0.75rem;
margin: 0 0 0 -2px;
font-size: inherit;
line-height: 1;
opacity: 0;
transition: opacity 0.2s ease-in-out, top 0.3s ease-in-out;
}
.with-floating-label input:not(:-moz-placeholder-shown)+label,
.with-floating-label textarea:not(:-moz-placeholder-shown)+label {
top: -6px;
font-size: 12px;
opacity: 1;
}
.with-floating-label input:not(:-ms-input-placeholder)+label,
.with-floating-label textarea:not(:-ms-input-placeholder)+label {
top: -6px;
font-size: 12px;
opacity: 1;
}
.with-floating-label input:not(:placeholder-shown)+label,
.with-floating-label textarea:not(:placeholder-shown)+label {
top: -6px;
font-size: 12px;
opacity: 1;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="card my-2">
<div class="card-header">Register</div>
<div class="card-body">
<form method="POST" action="http://mysite.com/register" novalidate autocomplete="off">
<input type="hidden" name="token" value="O4SZD63ujSDWUQNj6u2Q8LsC6HDQdhMZwjAW128x">
<div class="form-group with-floating-label">
<input id="username" type="text" placeholder="Username" class="form-control" name="username" value="">
<label for="username" class="text-muted">Username</label>
</div>
<div class="form-group with-floating-label">
<input id="first_name" type="text" placeholder="First name" class="form-control" name="first_name" value="">
<label for="first_name" class="text-muted">First name</label>
</div>
<div class="form-group with-floating-label">
<input id="last_name" type="text" placeholder="Last name" class="form-control" name="last_name" value="">
<label for="last_name" class="text-muted">Last name</label>
</div>
<div class="form-group with-floating-label">
<input id="email" type="email" placeholder="Email address" class="form-control" name="email" value="">
<label for="email" class="text-muted">Email address</label>
</div>
<div class="form-group with-floating-label">
<input id="password" placeholder="Password" type="password" class="form-control" name="password">
<label for="password" class="text-muted">Password</label>
</div>
<div class="form-group with-floating-label">
<input id="password-confirm" placeholder="Confirm Password" type="password" class="form-control" name="password_confirmation">
<label for="password-confirm" class="text-muted">Confirm Password</label>
</div>
<div class="form-group mb-0">
<button type="submit" class="btn btn-block btn-primary">Register</button>
</div>
</form>
</div>
</div>
</div>
Questions/concerns:
- Does this change affect security?
- Are there any usability issues?
- Are there any other ways it can be improved?