There is something I want to discuss now specifically related to radio buttons and checkboxes.
Specifically, I want to talk about the checked, the default, and the indeterminate states, or I should
say pseudo classes.
And when I talk about radio buttons and checkboxes, all I mean is an input element where it's type attribute
is either set to radio or it's type attribute is set to checkbox.
Remember, we did this a long time ago. Although they visually look kind of similar,
they are very different in their purpose and functionality.
Remember radio buttons, you can only select one within a group and in that sense they are mutually
exclusive, whereas an input of type checkbox, well, that is just a checkbox.
You can have one, you can have more, they can all be selected or none can be selected.
But anyways, let me move on.
As I mentioned, there are three very important states that you need to know about when working with
radio buttons and checkboxes, and they are :checked, and the :default state and the :indeterminate state.
All right.
Let me discuss each one very briefly.
First, let's look at this checked state. When checked, we know that those elements are going to be matched
by the :checked pseudo class.
And when might this be useful?
Well, it might be useful when you want to remove the default styling and want your own checked custom
styling.
And remember, we've seen examples of this a few sections ago.
We built our own radio buttons and in fact, in order to remove the browser default, remember we had
to set the appearance property to none, and then we built the styles back up ourselves.
You know what?
It's actually better for me just to show you.
So let me take the code that we we did earlier.
I'm just going to slightly amend it with different animations.
Let's have a look at that code.
I'll run you through it and you'll remember, I'm sure you'll recall the :checked pseudo class.
It really, really was very intuitive.
Let me show you now quickly.
So what is this checked state all about?
Well, you've already seen examples of this where we built our own custom radio buttons, and here I
kind of built it up again, but I've just got slightly different animation,
right?
That red dot now just comes from the center and the user can select their favorite fruit.
Very simple.
So I'm not going to write the HTML code up with you again because we already did it early on in this
course.
But I can run you through it, right?
I mean, it's very, very simple.
The first thing we have to do effectively is grab all of our inputs with type radio, and we have to
remove the default styling on these radio buttons.
And we do that by setting its appearance property to none.
If we don't do that, it's going to be excruciatingly irritating because what's going to happen is the
default selection styling is going to apply.
Look.
So if I click Banana or Strawberry, we can see that behind our custom red dot,
we've got this blue dot.
Not very ideal, is it?
So that's exactly why we set the appearance property to none.
And then all I did here, and I'll give you this file so you can open it up and we can start working
with it later,
I just applied some styling, you know, our own custom styling to our input of type radio.
Then what I did was I accessed the ::before pseudo element in order to create that round dot.
And I just created that round dot by literally setting its background color to red, giving it a border
radius and of course giving it a width and height.
That's all I did.
And of course I just added these transform CSS properties on here.
So it doesn't just appear instantly.
It looks like an animation.
"So then, Clyde, where does this checked state come into the picture?"
Well, let's assume we don't have a checked state.
Let's comment that out.
Go to the browser.
What's going to happen?
Well, nothing, because when the user checks this input box, nothing happens.
We haven't defined any CSS that's targeting any state.
So nothing happens, which is why we have to have this input of type radio where we target the checked
pseudo class, because now we're saying, hey, when the pseudo class is checked, we can now access that
red dot, right,
which we set in the ::before pseudo element.
And of course we can set its scale to 1.
At the moment the scale is set to 0.
So there we go.
Very, very simple.
And this is just kind of a recap for you as to how we used the checked state.
The HTML is very simple.
We just wrapped every radio button in a paragraph element.
That's basically it.
And we put everything, all those red dots and our custom radio button in the span elements.
So that's all I've done.
Let's hop back to the lecture.