.alert-validation css

form {

  > div {
    
    > input[type="text"],
    > input[type="email"],
    > input[type="password"] {
     
      // When input is...
      //   1. NOT empty
      //   2. NOT in focus
      //   3. NOT valid
      &:invalid:not(:focus):not(:placeholder-shown) {
        // Show a light reminder
        background: pink;
        & + label {
          opacity: 0;
        }
      }
      
      // When that invalid input becomes in focus (and also still isn't empty)
      &:invalid:focus:not(:placeholder-shown) {
        // Show the more robust requirement instructions below.
        & ~ .requirements {
          max-height: 200px;
          padding: 0 30px 20px 50px;
        }
      }
      
    }
    
    // <input> ~
    // <label> ~ 
    // <div class="requirements">
    .requirements {
      padding: 0 30px 0 50px;
      color: #999;
      max-height: 0;
      transition: 0.28s;
      overflow: hidden;
      color: red;
      font-style: italic;
    }

  }
}