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.
Instructor: [0:00] It's time to complete the styling of the visual representation of our radio buttons. Continuing in our FormControl component file, we'll scope these styles to the radio class that we had added, which was placed on the label element.
[0:14] The first improvement we can make for our radios is on the input control, and that's the visible element that we see that is currently a square. Our quick win here is to update the border-radius to 50%, which is definitely already an improvement.
[0:29] For our radio button, the expectation is that there will be some sort of fill that happens when it's in a checked state. Since our input control is providing the structure and the exterior of the control, we'll use a before element on our input control to add the internal indicator.
[0:49] Of course, this needs a content element which needs no value. Then we'll give it a width and a height of .5m. Now we need to choose a method to make it visible. Your impulse may be to reach for a background-color. However, if we use our Word to print the form, background color is going to be removed by most print settings. Instead, we will choose box-shadow.
[1:13] In order to make box-shadow fill the element, we'll set it to inset which will place it on the inside. To ensure that it covers the element, we'll set our x and y values to 1m, which is effectively double the width and height.
[1:27] Then using CSS custom properties, we'll apply our primary color, and as we've been doing for the rest of our styles, we'll ensure that that color is applied by falling back to our original theme primary value.
[1:40] On save, we would expect that it would be showing up in this container, but we haven't given it a display property. Back within our primary FormControl component, we need to add display properties on the input control class.
[1:54] Because we want our radio button checked visual to be centered within the element, the quickest way to enable this is with CSS grid, and in particular, the property place-content with a value center.
[2:07] On save, we now see our visual appearing within all of the radios, much like the input control container. Immediate improvement is once again to update to border radius 50%.
[2:21] We also need this to only be visible when a radio is in a checked state. We could set display to none, but we'd like to enable animation on this visual. Instead, we're going to use the transform property and set the scale to , effectively shrinking it to have no width or height. You can see that's now disappeared.
[2:43] To bring it back again, we first need to detect when the native input is in a checked state and then use our adjacent sibling selector to adjust it before, back up to a transformed scale. On save, we now see we've successfully made the checked indicator visible only on the checked radios.
[3:01] Our top two have been set up so that we can click between them. The transition's fine, but I mentioned that we wanted to animate it. Within the rule for the default state, we'll set up a transition with the duration of 180ms, specifically applied to the transform property and using an easing function of ease-in-out.
[3:21] Now, when I check between them, you can see that the indicator zooms in from the center as it transitions from a scale of to 1.
[3:31] In this lesson, we styled the visual indicator for the radio button check state by applying that visual style to the input control before and specifically using box-shadow instead of background-color so that our indicator would be visible even when printed.
[3:48] We then used transform with the scale function to enable animating our indicator between the states of checked and unchecked, where at the check state scales up the indicator. In order to position our visual indicator, we used display grid to center it using the place content property with the value of center.