Styling Radio Buttons as a Switch

[00:00:00]
>> Jen Kramer: So I know you're super impressed by those radio buttons, but let's face it, radio buttons are kinda ugly. And what you really want is one of those cool little switches that go back and forth. Except those little switches that go back and forth are usually done with a checkbox.

[00:00:14]
So you take a checkbox, you apply all the styling to it, and you're basically checking or unchecking a single checkbox. Remember, we don't have an unchecked state, so we have to still have two radio buttons if we want it to look like a switch. How do we make that magic happen?

[00:00:29]
So, enormous shout out to Scott O'Hara, who came up with a way of styling two radio buttons into a switch. And I'm going to show you that code pen here really quickly, because he figured this out, not me so, and it's really well done. So here is the HTML, okay, and he's got this set up.

[00:00:54]
You can see that the switch isn't really doing anything here. The whole point is just to show you this is on and off. And Scott O'Hara works for, I think it's microsoft, and he's an accessibility specialist, so inherently, these things are also accessible as well. He has a fully commented code pen here that shows you all of the things and all the reasons he's made the choices that he's made, and he also added this thing called focus, within which is another pseudo class that we have inside of CSS at this point, it's fairly well-supported.

[00:01:34]
When he wrote this code pen, it was not so, he actually wrote a polyfill for it. In JavaScript, you won't need this polyfill at this point in time. But that is what we're going to start with here. All right, so we are going to start by, go back over to my HTML here.

[00:01:53]
And I don't think there's a whole lot that's different here. I am going to add this field set. We have the idea of mode switcher. I'm also going to add to this a class of radio-switch. This is going to make things faster for styling because that's what Scott used in his code pen.

[00:02:12]
So we're gonna copy that over. We have a legend. We have our various radio buttons in place, and the styling for those. He has called his by slightly different names. So the thing we're gonna change here is we are gonna call the name here. We're gonna call this color-scheme.

[00:02:35]
And we're gonna change the second one down here, color hyphen scheme. And that's pretty much all the changes that we're gnna make to our HTML. Just a couple of little tweaks here, and our HTML is similar enough to what he has to make copying over his styles work.

[00:02:55]
So here in our CSS, what I'm going to do is, first, I'm going to copy all of this. Yee ha, not the body down here at the bottom, but basically all the way down the line, 133, and then in my code, pen here, one of the things that we can do To add this just after field set I am gonna put in at layer.

[00:03:25]
And I'm gonna call this switch CSS layers have to do with the cascade and styling. I'm gonna use it in this case, just to show that this is the code that came in from Scott's code pen here. And just kinda group it all together cuz there is a lot of it.

[00:03:45]
And what I can do at this point is I can take out some of these comments, and I can start making a few changes. So as you see, we basically have two separate switches right now, which is kinda fun. We have to actually click each one individually [LAUGH] In order to make that work amazing.

[00:04:09]
Okay, so let's go through and get this together. So we have our radio switch, border none, padding zero, white-space new wrap to this. I'm going to add display flex justify content, flex end
>> Jen Kramer: And margin-bottom 2rem. So this should, eventually, if it doesn't immediately, will push it all the way on over to the right side.

[00:04:49]
We're gonna make the label text a little bit smaller. Here, under radio-switch legend, I am going to add, or sorry, not legend I need to find the label. Under the label, I am going to add a font size of 0.9 rem. You could certainly use the techniques we have been using where we have worked with rescaling depending on using the CALP function and so forth, you could do all of that as well.

[00:05:29]
And then I'm going to make some changes to our colors.
>> Jen Kramer: And that's gonna be down here under the focus within. So I'm just taking out these comments just to have things take a little bit less room.
>> Jen Kramer: There is a polyfill class here. We don't need the polyfill class because we don't need the polyfills changing our colors in the switch radio focus-within label, first of type after so here in our box shadow for this, we are going to change this to,
>> Jen Kramer: Var(--white).

[00:06:19]
>> Jen Kramer: And var (--marina) make it blend with our color scheme a little bit better.
>> Jen Kramer: We're gonna add a little bit of a border var(--onyx)
>> Jen Kramer: Okay, we're going to add in the labels, our background is gonna be var (--white).
>> Jen Kramer: Onyx.
>> Jen Kramer: Okay, and then down here,
>> Jen Kramer: First type checked after this is gonna be Marina,
>> Jen Kramer: And
>> Jen Kramer: Okay, and I suspect I need to get rid of my field set style here.

[00:07:43]
So let me get rid of this. And it may be that I left my divs in here. I bet this is causing the problem,
>> Jen Kramer: Because we don't want those separated. There we go. Okay, you gotta take those DIVS out in your HTML, and that will put the two things on top of each other.

[00:08:05]
So now we should have a switch that is working. Yeah, whoo.
>> Jen Kramer: How amazing is that, okay? And when we make the screen bigger, it's in a good spot here too. So you could center that on the page if you want, on mobile or if you like it where it is, you can keep it.

[00:08:35]
>> Jen Kramer: If you want it centered here on mobile.
>> Jen Kramer: Let's see, this would be justify content center, right? There we go. And then in your media query for radio switch and come down to our media query, we will add.radio-switch, then we'd say justify content flex end. So now when we go here to our larger screen.

[00:09:17]
There it is over there on the right-hand side. Yeah, and now we have the ability to turn it on and off.
>> Jen Kramer: How many of you are ever gonna write this again inside of JavaScript. Never, we're done, yeah.
>> Speaker 2: Are there any issues with older browsers that allow that control, though.

[00:09:39]
>> Jen Kramer: Yeah, most likely, yeah. So the things that make this work well would be focus within. That's that's a property here. Let's open up, can I use, and so focus within is one of the things. Okay, so that has pretty good support. How far back are you guys supporting?

[00:10:06]
>> Speaker 3: Gosh, we're not even i.e.11 anymore.
>> Speaker 4: No, we don't no it's
>> Jen Kramer: Okay.
>> Speaker 3: We're past ie 11. So it's pretty new,
>> Jen Kramer: Pretty new stuff? Yeah, so this is 95.95%. So this focus within is a really helpful one for accessibility purposes. So that's one of them.

[00:10:26]
We have the has selector was one of the-
>> Speaker 3: That's the one I was mostly wondering about.
>> Jen Kramer: Has is only at 92.88, but, that's still almost everything. And then we had light dark, light dark. So this is a little bit lower at 86.88 at this moment in time.

[00:10:50]
And of course, people are adopting new browsers all the time. So those are some of the big ones. Yeah, of course, when you're working in government, you do have to support older browsers, and so some of the coolest stuff takes a while to get to.