Styling HTML5 forms with CSS3

Our form is now fully functional across browsers so now we need to make it a little more appealing across different viewport sizes. Now, I don't consider myself a designer, but by applying some of the techniques we've learned throughout the previous chapters, I still think we can improve the aesthetics of our form.

Note

You can view the styled form at example_09-02, and remember, if you don't already have the example code, you can grab it at http://rwd.education.

In this example, I've also included two versions of the style sheet: styles.css is the version that includes vendor prefixes (added via Autoprefixer) and styles-unprefixed.css is the CSS as written. The latter is probably easier to look at if you want to see how anything is being applied.

Here's how the form looks in a small viewport with some basic styling applied:

And here it is at a larger viewport:

If you look at the CSS you'll see many of the techniques we've looked at throughout previous chapters applied...