Create Custom Radio Button CSS Styles

This lesson will focus on styling the radio button styles for both the default and checked state. We'll make sure our styles are accessible, including print-friendly.

We'll use the ::before selector to apply a box-shadow that we'll inset and apply our primary color to so that we can visually indicate which radio button is selected. When doing this, this style will initially be applied to every radio button element. We fix this visual appearance with an initial transform of scale(0) and then applying a transform scale(1) to the input:checked selector.