So let's work on this checkbox now
and first of all, I want to ensure that these styles here which target all inputs, which includes the checkbox,
do not target the checkbox,
I don't want it.
So what I will do here is, I will go to this input selector here and actually add the not pseudo selector,
not allow us to say that it should target all inputs which do not fulfill the requirement we add here
inside of the parentheses
and that requirement just is another selector.
So here, I will actually add another attribute selector with square brackets, type equals checkbox.
So all in inputs which are not of type checkbox will receive these styles
and on the other hand, the checkbox will not receive them and that's exactly what I want.
Now we can also add that to our signup-form input down there, in front of the focus pseudo selector
and with that, everything should work as before
and we don't see a visual difference but if you inspect your checkbox, you'll see that it doesn't get
the default input styles other than display block and so on which it should get,
it doesn't get the other ones though.
So with that, we're ready to restyle it
and how do we do that?
Well for that, we need to select the checkbox. We already saw how we could do this here,
let me copy that selector and add it again, maybe here in front of the button
and just to mix things up, I'll use type equals checkbox here, just to prove that this also
works and in there, we can change its look.
Now what we can do for example is, we could give it a border of one pixel solid and also this light
grey
we got on all our inputs. We could add a background,
let's set it to white and maybe give it a width of 1rem and a height of 1rem.
So I'm basically building a box here,
keep in mind our checkbox is of type display inline block, so we can build it as a box.
I build a box which has a border white background and it's 1rem wide and high.
If we do that and we save that and we reload, it increased in size
but I don't see a white background,
I don't see my border,
we still got that default style.
However it clearly does receive our styles as we can confirm if we select it, here
all the styles are applied.
Now the thing is, just as the select, the checkbox is a special type of input.
If we scroll down to its browser default styles, we see that it gets this webkit appearance style which
sets it to checkbox. For the select by the way, we can also see webkit appearance menu list.
These are important default styles that defined that
the select has these errors and works like this and that the checkbox works like this.
If you want to change that, you have to overwrite it.
Now this would also be possible for the select dropdown but I want to do it on the checkbox since that's
a bit more interesting in my opinion.
So let's overwrite it by setting that -webkit appearance style.
Now don't be irritated by that leading dash here,
this is a valid property name,
it's looking strange because it's a browser a specific one,
it's not the same in all browsers and that's why it's starting with a dash
and we should set it to none, to disable that default.
If we now save that and reload,
now we got the new style and now we can't check it actually.
We'll work on that,
we got our style at least. Now as I said, this is browser specific, so we should also add Moz's appearance,
which is actually the attribute required by Mozilla to overwrite the default look there too
and let's add appearance in general and set it to none,
this will also help all browsers to understand that and they don't have their browser default or
actually, it would overwrite the browser default here if also understands this syntax.
So now we're forcing this checkbox to look the way we want it to look,
now before we continue styling it, one thing we can see is that it's now not inline or not centered,
vertically centered to the label.
So we can fix this by going up to our checkbox and label selector and setting vertical align to
middle,
let's try that,
let's save that and reload,
that looks better.
Now you could also try different values, like bottom for example which in this case in my opinion looks
even better
a tiny bit because now they're aligning at the bottom and I believe this looks better here.
Now one thing that's missing of course is our ability to check this and to see a difference.
It's important to understand that technically, this still can be checked.
So if I click in there, this actually behind the scenes is switching between being checked and not being
checked, we just don't see that here.
The reason for this is that no style is set for this being checked,
previously, the webkit appearance did this for us,
the default value is set by the browser but since we overwrote this to be none, we have to do it manually.
So let's again target signup-form input type equals checkbox or feel free to try out a different
selector here
and in there, now we use the checked pseudo class.
So as you see, you work a lot with pseudo classes when working with forms.
Now in here, we set the styles
we want to set for the check mode
and there, I just want to set the background to my light green color and change the border to my dark
green color, which we also use in other places of the app,
for example here,
so this dark green. I'll copy that from the main header brand and enter it as a color here.
Now with that if we reload, we can actually check this as you see, the remaining part just is that I want
to get rid of that outline,
so when we're focusing this checkbox, I don't want to have an outline, so therefore maybe I just remove
that not selector from all the other inputs and see if that works the way I want it to work,
yes,
this now certainly looks better.
So now we get our custom checkbox here with our own style overwriting the default
and with that, we achieved a lot,
let's also check this on the mobile screen, that's looking good there too.
So now let's see what else we can do with that form.