Styling HTML5 forms with CSS

We have our HTML5-powered form built now, and understand the various input types and associated attributes. However, 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.

I’ve taken my own stab at styling the form; you can check that version out at example_13-02, and remember, if you don’t already have the example code, you can grab it at https://rwd.education.

Here’s how the form looks in a small viewport with that basic styling applied:

Figure 13.20: Our form on mobile with basic styling applied

And here it is with a larger viewport:

Figure 13.21: Our same form styled for wider viewports

If you look at the CSS in the example, you’ll see many of the techniques we’ve looked at throughout previous chapters...