Reply To: Coyier's Input Form in CSS

[Shikkediel]

http://www.sassmeister.com/

form > div > input[type="text"]:invalid:not(:focus):not(:placeholder-shown),
form > div > input[type="email"]:invalid:not(:focus):not(:placeholder-shown),
form > div > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) {
  background: pink;
}

form > div > input[type="text"]:invalid:not(:focus):not(:placeholder-shown) + label,
form > div > input[type="email"]:invalid:not(:focus):not(:placeholder-shown) + label,
form > div > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) + label {
  opacity: 0;
}

form > div > input[type="text"]:invalid:focus:not(:placeholder-shown) ~ .requirements,
form > div > input[type="email"]:invalid:focus:not(:placeholder-shown) ~ .requirements,
form > div > input[type="password"]:invalid:focus:not(:placeholder-shown) ~ .requirements {
  max-height: 200px;
  padding: 0 30px 20px 50px;
}

form > div .requirements {
  padding: 0 30px 0 50px;
  color: #999;
  max-height: 0;
  transition: 0.28s;
  overflow: hidden;
  color: red;
  font-style: italic;
}

Second part’s a whole different ball park…