Create Custom Checkbox CSS Styles with SVG
This lesson will focus on creating the checkbox styles for both the default and checked state. We'll make sure our styles are accessible and able to use our theme system.
We'll get started by adding an inline SVG to our input which we can style. I'll give you a tour of what is happening with the SVG and show you how to display it in the checkbox by providing a width. From there we will set the default state of the SVG to a scale(0) and set up a transition so when the checkbox is clicked to scale the SVG to 1.
Instructor: [0:00] In this lesson, we will complete styling of the visual indicator or the checkbox. Within our form control component file, we will scope these styles to our previously added checkbox class which is placed on the label around the checkbox.
[0:15] The first step that we'll make is to round the corners of the input control using our previously created system variable for border-radius, which has given the checkboxes just a slightly rounded appearance.
[0:30] Next, we need to create the actual checkmark element. There are few options for how to do this, but an important thing for our form system is that all the colors can be themed. There are some limitations with trying to use a background image even if it's in SVG.
[0:49] To resolve this, we will add an inline SVG into our existing input control element. The SVG that I've copied in simply draws a path that will create the checkmark graphic. Even though I've saved, and the checkmark should be appearing inside our input control box, it's not.
[1:10] The reason is, I've only kept the viewBox, essentially, the window into the SVG, but doesn't actually provide a width or height declaration. We'll create a rule for the input control SVG and apply a width of .65em. On save, you now see that checkbox within the first diagram, which is the only place we've added it so far.
[1:36] Before we move on, there's a couple other attributes to add to the SVG. The first is aria-hidden=''true'' which effectively hides the SVG as a graphic from assistive tech since the SVG is a visual decorator, and it will receive the semantics of the check state from the native input instead.
[1:56] There is also presently an issue in some versions of IE where the SVG may receive a second focus event. We'll also include focusable=''false''. We'll copy our update with the SVG to the rest of our checkbox controls.
[2:11] The other key attribute that we have on our SVG is that the stroke color is defined as current color, which means that it will pick up the text color of its nearest parent. Right now, that's using our body text color, so let's explicitly define that the color to use would be of our primary theme color. It's a pretty sly difference, but it will ensure that it matches the radio controls.
[2:37] Now, we need to only display the visible checkmark indicator for checkboxes that are, in fact, checked. We'll use the same technique that we used for the radio button controls by adding a transform with the scale function that scales the checkmark down to a width and height in its default state. On save, you see that those have disappeared.
[2:59] Then, when the input is in a checked state, using the adjacent sibling selector, we can scale back up our SVG with a transform scale of 1. Let's go ahead and check 1 to watch that happen. It's happening immediately. Let's add a transition, and we'll transition using a duration of 120ms, specifically on the transform, with an easing function of ease-in-out. Let's see what that looks like.
[3:30] Because of our scale function and the fact that grid is being used to place the checkmark in the center, it appears to be zooming in from the center. As a personal preference, I would like to change the transform origin to the bottom and the left. Now, the transition appears like it's drawing in the checkmark.
[3:51] In this lesson, we enabled the checkmark indicator by adding an inline SVG, so that it could use the attribute of current color to pick up the current text color allowing us to extend our theme more easily into the SVG. We also learned about the importance of adding aria hidden to hide this element from assistive tech and focusable falls to prevent a secondary focus event.
[4:15] We then used the same method as we had used for radio buttons of switching between the checked and unchecked state by transitioning from a scale value of to 1. We additionally learned about transform origin to move the point at which the transform occurs on the element.