<form id="form">
  <div>
    <label for="username">Username</label>
    <input name="username" type="text" placeholder="Username" pattern="[a-z]{1,15}" id="username">
  </div>
</form>

  html {
    box-sizing: border-box;
  }

  *,
  *:before,
  *:after {
      box-sizing: inherit;
  }

  body {
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    background-color: #ECEFF1;
  }
  form {
    max-width: 300px;
    margin-top: 60px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    position: relative;
    padding-top: 80px;
  }
  label,
  input {
      display: block;
  }
  label {
    font-size: 12px;
    text-transform: uppercase;
    color: #B0BEC5;
    margin-bottom: 10px;
  }
  input {
      width: 100%;
      padding: 10px;
      outline: 0;
      border: 2px solid #B0BEC5;
  }
  input:invalid {
      border-color: #DD2C00;
  }

  #notify {
    margin-top: 5px;
    padding: 10px;
    font-size: 12px;
    width: 100%;
    color: #fff;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  #notify.error {
    background-color: #DD2C00;
  }