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.
This example only has :valid
and :invalid
styles.
This example uses :invalid:not(:focus)
. Thus, the styles are only applied when the focus is not on the field.
This example is the same as the previous one, except that the field is now required
.