Bootstrap form with floating labels

Question

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:

1. Does this change affect security?
2. Are there any usability issues?
3. Are there any other ways it can be improved?

Answer 1

1. I don't see anything worrying about security;
2. Regarding usability it looks pretty good too;
3. Since you are using placeholders instead of labels I would remove all labels and work only with inputs. Like this:

.form-control {
 margin-bottom: 1rem;
}
.form-control:focus {
 box-shadow: none !important;
 border-color: #c4c4c4 !important;
}

<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">
 <input id="username" type="text" placeholder="Username" class="form-control" name="username" value="">
 <input id="first_name" type="text" placeholder="First name" class="form-control" name="first_name" value="">
 <input id="last_name" type="text" placeholder="Last name" class="form-control" name="last_name" value="">
 <input id="email" type="email" placeholder="Email address" class="form-control" name="email" value="">
 <input id="password" placeholder="Password" type="password" class="form-control" name="password">
 <input id="password-confirm" placeholder="Confirm Password" type="password" class="form-control" name="password_confirmation">
 <button type="submit" class="btn btn-block btn-primary">Register</button>
 </div>
 </form>
 </div>
 </div>
</div>