Styling HTML5 forms with CSS

We have our HTML5 powered form built now, but we need to make it a little more visually appealing across different viewport sizes. By applying some of the techniques we've learned throughout the previous chapters, I think we can improve the aesthetics of our form considerably.

You can view the styled form at example_10-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 with Autoprefixer) and styles-unprefixed.css is the CSS as originally 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 our basic styling applied:

Figure 10.19: Our form on mobile with basic styling applied

And here it is with a larger viewport:

...