Accessible Cross-Browser CSS Form Styling

Forms are one of the most common features of a web application. They are also a common cause of headaches. The controls you use, the markup for the structural layout, and the styling all have to be considered.
What you build can look and behave differently depending on the browser being used, and how you build it can impact the accessibility of your application.
Stephanie Eckles has prepared several lessons that work through the creation of a complete form demo featuring the most common controls with a variety of attributes.
You'll create semantic fieldsets, add responsive styles without media queries, and prepare styles for accessible validation.
The demo is built with Sass and Eleventy. Don't worry if you don't have prior experience with these tools— Stephanie's code and explanations make it easy to follow along, and additional resources are available if you need them.
This course is new and up to date — if you are looking to build a form for your website, you should start here.

• Course Introduction: Accessible Cross-Browser Form Field CSS Styles
• Initialize the Form Design System Setup with Sass and CSS Variables
• Create Semantic, Accessible HTML for Text Form Inputs
• Create the `form-group` Component Styles
• Create Semantic, Accessible HTML for Form Selects
• Create Semantic, Accessible HTML for Radio Buttons and Checkboxes
• Create Reset Styles to Normalize Form Fields Cross-Browser
• Use Sass Mixins to Style Inputs with Accessible Contrast and Keyboard Access
• Create Custom Form Select and Multi-select CSS Styles
• Create Custom Select CSS Styles for Focus and Disabled States
• Create A Layout Structure with CSS Grid For Radio Buttons and Checkboxes
• Create Custom Radio Button CSS Styles
• Create Custom Checkbox CSS Styles with SVG
• Create Custom Radio Button and Checkbox CSS Styles for Focus and Disabled States
• Create Custom CSS Styles for Form Submit Buttons
• Define Semantic Fieldset HTML and Create CSS Styles For Responsive Form Layout
• Create and Style an Accessible Field Description
• Create Accessible Styles for Invalid Form Fields