10 Styling forms

Forms are everywhere in our applications. Whether contact forms, login screens, or core to the application’s functionality, they are truly omnipresent. The design of the form, however, can easily make or break the user’s experience. In this chapter we will style a form and look at some of the accessibility considerations we need to make sure to address. We will look at some of the challenges that come with styling some radio and checkbox inputs and drop downs as well as cover some of our options for styling error messaging.

A form in this context is a section of code, contained inside of a HTML <form> element containing controls (form fields) that the user interacts with in order to submit data to our website or application.

Because contact forms are so prevalent across applications and websites, we will use a contact form as the basis for our project. Our form contains two input fields, a dropdown, radio buttons, a checkbox, and a text area. We also have a header at the top and a send button at the end of the form. Figure 10.1 shows our starting point, the raw HTML without any styles applied and what we aim to accomplish.

10.1 Setup

10.2 Resetting fieldset styles

10.3 Styling input fields

10.3.1 Styling text and email inputs

10.3.2 Making selects and textareas match the input styles

10.3.3 Styling radio inputs and checkboxes

10.3.4 :where() and :is() pseudo-classes

10.3.5 Styling checked radio and checkbox inputs

10.3.6 Using the :checked pseudo-class

10.3.7 Shaping the checked radio input’s inner disk

10.3.8 Using CSS shapes to create the checkmark

10.3.9 Calculating specificity with :is() and :where()