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>