Create A Layout Structure with CSS Grid For Radio Buttons and Checkboxes
We'll setup the layout structure for our custom radio button and checkbox styles using CSS grid. These input types will share the .form-control component styles. This lesson will apply the initial styles to prepare for creating custom visual control styles.
Similar to focus states for selects, we will need to add a wrapping span and nested span to our radio buttons and checkboxes to apply visual styles to these native elements.
Instructor: [0:00] Here, we can see the current state of our radio buttons and checkboxes across the browsers of Chrome, Firefox, and Safari. There are some clear differences between the way these controls are rendered. Currently, CSS does not allow styling of the native radio buttons or checkboxes, so we must completely replace the visual that is created for these controls.
[0:24] When we initially laid out our HTML for these controls, we kept it pretty simple. Now that we're ready to style them, we need to add a few more elements and classes. Because our label element is our wrapping element, we're going to give it our primary component class of form-control. This will be placed on our radio buttons and checkboxes.
[0:45] We'll also signify which type of control, and for radios we'll use simply radio. Then, we'll add a span with a class of form-control input and again, specify that this is a radio input. That will wrap the native input and serve as the layout container.
[1:02] Then following the native input, we'll add a span with the class of input-control. This will be used to render the visual that represents the radio button and checkbox controls. We can then copy this pattern to our remaining radios and checkboxes with our checkboxes updating to use checkbox as a class name instead of radio.
[1:23] On save, you won't see our visual change because we're using spans and they're rendering inline, they have not altered the native browser rendering of the control. Since our form control is a new class, we'll create our new Sass file to begin our form-control class. Before we get too far, we'll be sure to import this and we'll add it as the last item.
[1:43] Our form-control is applied to our label, which wraps the other elements and we're going to use inline-grid as the display value. This gives us two advantages. We can use grid template columns to precisely define the width of each column and take advantage of grid gap to add space between the input and the label value.
[2:02] The next thing we need to do is hide the native input, but we want to do this excessively. The method we'll use is to set opacity to but allow it to retain a width and a height. The reason being so that users of touch devices can still discover the native control, which will give their assistive tech the semantic feedback to know what they're interacting with.
[2:24] Next, let's make our input control visible so we know what we're working with. In order to do that, we'll give it a width and the height and a border using our themes default color.
[2:34] When we save, we see that the element doesn't seem to be taking up the correct width. If we inspect what's happening, recall that we've allowed our native input to retain a width and a height, so we need to resolve their stacking order and allow them to occupy the same space of the form-control input.
[2:53] To do this, we'll use a trick we used for the select styles which is to create a single grid template area and place all the child elements into it.
[3:04] On save, we've managed to allow our input control width and height. What happened to our overall alignment? If we inspect our label, we'll see that despite adding a display of inline grid, we're accidentally overriding ourselves because of the style applied to labels within a form-group component.
[3:21] To resolve this, we remove the display block from the label and scope it specifically to labels that do not have a class of form-control. On save, our generated input control snaps to the position we would expect and is now using our inline grid. With that, we have the layout structure necessary to proceed with creating custom controls in the next couple of lessons.
[3:46] In this lesson, we set up a common component class of form-control that is applied to the label surrounding both our radio buttons and checkboxes. For both field types, we added an additional wrapping span that went around the native input and a nested span that we attached our visual inputs files to.
[4:05] Then we added our baseline styles for our input controls to manage the alignment and also add the initial display values to make our input control visible.