<form>

  <div class="input-wrapper">

    <label for="fname">Name</label>

    <input type="text" name="fname" id="fname" minlength="3" maxlength="10">

    <span></span>

  </div>

  <div class="input-wrapper">

    <label for="uname">Username</label>

    <input type="text" name="uname" id="uname" minlength="4" maxlength="10" pattern="[a-zA-Z0-9]+" required>

    <span></span>

  </div>

  <div class="input-wrapper">

    <label for="email">Email Address</label>

    <input type="email" name="email" id="email" placeholder="hello@me.com">

    <span></span>

  </div>

  <div class="input-wrapper">

    <label for="password">Password</label>

    <input type="password" name="password" id="password" minlength="8" required>

    <span></span>

  </div>

  <button>Submit</button>

</form>

body {

  margin: 20px;

  font-family: 'Lato';

  font-weight: 300;

  font-size: 1.75rem;

}

​

button {

  background: black;

  color: white;

  border-radius: 10px;

  border: none;

  padding: 0.5rem 1rem;

  margin-top: 2rem;

  cursor: pointer;

}

​

form {

  width: 600px;

}

​

div.input-wrapper {

  margin: 1rem 0;

}

​

label {

  width: 30%;

  min-width: 200px;

  display: inline-block;

  font-weight: bold;

}

​

input {

  border-radius: 5px;

  border: 2px solid black;

  padding: 1rem;

}

​

input + span {

  position: relative;

}

​

input + span::before, input + span::after {

  font-size: 60%;

  font-weight: bold;

  color: white;

  padding: 0.25rem 0.5rem;

  font-weight: bold;

  width: 80px;

  position: absolute;

  left: 0.5rem;

  text-align: center;

  top: -0.8rem;

  border-radius: 5px;

}

​

input:required + span::before {

  content: "Required";

  background: black;

}

​

input:user-invalid {

  border: 2px solid red;

}

​

input:user-invalid + span::after {

  content: "Invalid";

  background: #C62828;

  top: 1.2rem;

}

​

input:not(:required):user-invalid + span::after {

  top: 0.2rem;

}