Using Level 4 CSS validity pseudo-classes to improve form UX

index.htm

<div class="container">
  <form class="form">
    <div class="form-group">
    <label class="sr-only" for="emailAddress">Email Address</label>
    <input class="form-control input-lg" type="email" placeholder="[email protected]" id="emailAddress" required>
    <button type="submit" class="btn btn-default input-lg">Subscribe</button>
  </form>
</div>

validate.scss

.container {
  display: flex;
  margin: 50px auto 0;
  max-width: 500px;
}
form {
  display: block;
  width: 100%;
}
button {
  display: block;
  margin-top: 10px;
  width: 100%;
}
input[ type=email ] {
  border-width: 5px;
  &:focus {
    // target the element when it isn't valid
    &:invalid {
      border-color: #a94442;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      color: #a94442;
    }
    // target the element once a valid 
    // email address has been entered
    &:valid {
      border-color: #3c763d;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      color: #3c763d;
    }
  }
}