Style a form

A well-designed form should be easy for everyone to complete. Changing the style of a standard form field or creating a custom form field can affect the accessibility of a form. Before restyling your form fields, read Design a form to help you choose the best form fields for the type of data you are collecting.

The visual style of form fields may be the last thing implemented but may be part of the initial design discussions. Changing the style of form fields can be difficult, leading to the creation of custom controls that may not be fully accessible. If you use Rivet, accessible styles are part of the package.

Use care when changing the default style of a form field. Browsers and devices respond in different ways to selectors, which means your custom styling may not look the way you intended.

• Inclusive Considerations When Restyling Form Controls: This post emphasizes accessibility considerations when restyling native HTML form elements using CSS.
• Styling HTML forms: This article from Mozilla Developers Network (MDN) looks at restyling easy-to-style form elements.
• Advanced styling for HTML forms: From MDN, this article looks at restyling more complicated form elements, including examples of how that styling may appear in different browsers.