:invalid and :valid

Back to the index.

See also the CSS3 User Interface spec.

There are several pseudo-classes that are used to style the various states of form elements. This page tests some of them.

Test sheet:

input:invalid {
	border: 1px solid #CB000F;
	color: red
}

input:valid {
	color: #00882D;
	font-weight: bold;
}

input:indeterminate {
	background-color: grey;
}

The required pattern here is of a Dutch postal code: four numbers, an optional space, and two capital letters.

Related tests

One could think that any field with an improper value is :invalid, but that turns out not to be the case. For instance, if you fill in something else than a number in the field below, it is :valid. That’s odd.

Also, a field with no value should be indeterminate, since it’s neither valid nor invalid. It isn’t, however.