<form>

  <div class="input-wrapper">

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

    <input type="text" name="fname" id="fname">

    <span></span>

  </div>

  <div class="input-wrapper">

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

    <input type="text" name="uname" id="uname" 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="text" name="password" id="password" 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 {

  font-size: 60%;

  font-weight: bold;

  color: white;

  padding: 0.5rem;

  font-weight: bold;

  width: 80px;

  position: absolute;

  left: 0.5rem;

  text-align: center;

  top: -1rem;

  border-radius: 5px;

}

​

input:required + span::before {

  content: "Required";

  background: #3949AB;

}

​

input:not(:required) + span::before {

  content: "Optional";

  background: #2196F3;

}

​

button {

  cursor: pointer;

}