Form examples - CSS validation

Here are three examples of CSS-only form validation. All fields only accept the correct answer, ppk (lower case!) as a valid value. Any other value is invalid.

Example 1: pure

This example only has :valid and :invalid styles.

Example 2: not focus

This example uses :invalid:not(:focus). Thus, the styles are only applied when the focus is not on the field.

Example 3: required

This example is the same as the previous one, except that the field is now required.