HTML and CSS Reference
In-Depth Information
input:invalid {
color: red;
}
input[type=”submit”].disabled,
input[type=”submit”]:disabled {
background: #aaa;
color: #fff;
}
JavaScript or server-side form validation can apply these class names to
help present the proper state of the elements.
By default, labels and forms are inline elements. This is a useful baseline,
but creating a form presentation with a clean grid requires some changes
to those default behaviors and sometimes a little extra markup or careful
use of
fieldset
elements.
Creating a layout where the label is on a line above the form field is as
easy as setting the label to display as a block element would (
Figure 11.4
):
label {
display: block;
margin-top: 1em;
}
[...]
<fieldset>
<legend>Your Info</legend>
<label for="fname">First Name:</label>
