Create Custom Radio Button and Checkbox CSS Styles for Focus and Disabled States
In the last two lessons, we set up the initial state styles for radio buttons and checkboxes. Now we'll add styles for the focus and disabled states using our existing Sass mixins. We'll do this by layering box-shadow effects of a white border and blurred primary color.
We'll also learn about an up and coming pseudo selector - :focus-within - that will be used to apply styles to the label of a control in a :focus state.
Instructor: [0:00] Now that our styles are complete with the visual indicator on radio buttons and checkboxes, we need to add styles for their focus state and disabled state.
[0:09] First, we'll handle for focus. We'll be able to unify these styles within our main form control component class. Now, whereas our previous focus state would apply a border color change and box-shadow, we want to ensure that there is a clear visual difference, particularly for checked radios and checked checkboxes that also have focus.
[0:31] To begin our roll, we'll start by detecting when the native input is in a focus state, and we're going to use box-shadow for our effect. Because box-shadows can be layered, the top layer closest to the element will essentially create a .5m border that will create a visual separation between the control border, and our second box-shadow effect, which will have a blur and spread radius, and apply our primary color. Let's see what that looks like.
[1:01] When I focus into the first radio and then use my down arrow to focus into the second radio, you can see how that effect looks. I will look tab down to our checkbox, and you'll see it applied similarly. The other nice thing that we can do on focus is change the label color to primary.
[1:19] However, because of the way our markup is constructed, we cannot use the adjacent sibling selector, because the label value sits outside of the input control. Instead, we can use an up and coming pseudo selector called :focus-within. We've placed this on our main form-control component. :focus-within applied on our label will detect that focus event on the native input and be able to apply additional styles to elements within.
[1:47] In this case, we'll update the color property to color primary. When I focus, you'll see that that focus event is now allowing us to update the label color. At the time of recording, :focus-within still requires a polyfill for some older browsers, so it should be considered a progressive enhancement.
[2:06] Now that we've added styles for focus, we need to complete our styles for the disabled state. To do this, we'll need to revisit our markup and add an additional class to the form-control element that is, form-control with a modifier of disabled, and we'll add this to all of our disabled controls.
[2:24] To start with, we'll create a rule for when that class is also present on the form-control element, and then on the input control element will include our field disabled mixin. On save, you see that gets us most of the way there, except for a radio that is both disabled and checked.
[2:42] Because we have used box-shadow to create the visual of a checked radio, we must completely define the box-shadow property when in a disabled state. When we have detected that the label has the form-control disabled class, we'll update our box-shadow to use the same color value as is being used for the checkbox color. Unsave that update has occurred.
[3:04] Finally, we'll use this black rgba value as the applied color value on the label, which updates the color of the label to serve as an additional indicator that the control is in a disabled state.
[3:16] In this lesson, we created a style for the focus state of both radios and checkboxes. To ensure the focus state was clearly distinguishable for a control that was both checked and in focus, we layered our box-shadow effects to first create the appearance of a white border and followed that with a box-shadow using our primary color.
[3:38] We also learned how to use focus-within to detect the native focus event within the label to also apply a color that affected the overall label color. We then added the form-control disabled class to our label, for those controls that were disabled, and used it to update the label color and on the input control to include our field-disabled mixin.
[4:00] Because of the way the radio indicator was applied with box-shadow, we had to redefine the box-shadow to update its color when in a disabled state.