Form Selectors Exercise

In this exercise, you'll use CSS to style a form and let the user known when they've entered something wrong.

1. Download this webpage into a folder, or copy into JSbin.com.
2. Look through the HTML so that you get an idea for the structure of the HTML elements.
3. Add a CSS rule to style the span elements inside each label. Add a width and float property so that the spans all form a left column.
4. Add a CSS rule to style the input element with type="button". Give it a width that makes it take up the whole width of the page.
5. Add a CSS rule to style the hover state of the button. Give it a background-color on hover.
6. Add a CSS rule to style the input elements that are required. Give them a border.
7. Add a CSS rule to style the input elements that are invalid. Give them a background-color of red.
8. Add a CSS rule to style the span elements that come after the labels (the form hints). Change their font properties.
9. Now you'll make it so that the form hints only appear when you hover over the labels. First add a display:none; property to the previous rule so they start off hidden. Then add a CSS rule to style the span elements that come after the labels, but only when the label is being hovered over. Give that state a display:block; property.
10. Add a CSS rule to style the span that appears after the newsletter input, but only when that input is checked. Give it a bordercolor property.

In the end, your form should look something like this screenshot:

Show Solution