Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:11Length:1.4 hours
An introduction to styling html forms 400x277
  • Overview
  • Transcript

3.3 Styling Checkboxes

So far, we’ve had a pretty easy time styling the text inputs and buttons. Now it’s time to tackle the more complex elements. We’ll start with checkboxes.

Related Links

3.3 Styling Checkboxes

Welcome back to the course. So far, we've had a pretty easy time styling the inputs and the buttons. But now we're getting to the point where we must use some more complex CSS techniques to style these other elements. And in this lesson, we're gonna take care of the checkboxes. So in our design file, this is how the checkboxes should look like. So we have a square basically with round corners, a darker background in a stroke. This is for unchecked and for checked. We're changing dark background to a blue color. We have a checkmark inside. And we also have a border that's the same color as the background here. Now, since we're in here in Figma, let's go ahead and export this checkmark as an SVG, because we will use it later as a background. So let's go in here, and we start with this. Inputs, type checkbox. The first thing we'll do is we're gonna set up display to none. Notice we have a little change there. Let me show you that again. All right, so when I set display to none, Yeah, the label kinda moves to the left a little bit. That means the whatever remained of that default checkbox we saw is now gone. And this is the way we're gonna style it. We're gonna hide the old and create our own checkbox. That's gonna be linked to this label here. And just for reference, here's how the HTML structure looks like for a checkbox. All right, we have input type checkbox, and then under it, we have the label. So the way we're gonna do this is we're gonna create a pseudo element on the label, and we're gonna style it to look like a checkbox. Very simple, very simple, yet, it can be pretty complicated. So we're gonna select the label immediately following the input type checkbox, and we're gonna do the following. We're gonna set a cursor to pointer. This is just to have that Mickey Mouse hand. And also, I'm gonna set user select to none. This basically doesn't allow us to select the text here. And I'm doing this, because without it, you can find yourself double clicking by accident and selecting the text, or just doing this, and it's really unnecessary. We're gonna use a before pseudo element, and we're gonna style it to look exactly like this one right here. We're gonna start by giving it a blank content. The width and height are actually 16 pixels. So with 16 pixels height, 16 pixels. Let's give it a background color of grey 100. And let's actually set a display to inline block, so we can see it. And there it is is right here. And let's set a border, 1 pixel solid, and we'll be using a gray 80. And by the way, I know these values by heart, because I have some notes that I'm looking at. But if you are doing this for the first time, you would have to go to Figma, or whatever software you're using. And see what color am I using here. And then copy and paste that in your file. Let's also add a border-radius, and that is 3 pixels and, what else? Lets push the label to the right a little bit. We'll do that by setting a margin right on our new checkbox. Let's say 8 pixels. I think that's the correct amount, yes. And now I'm gonna set a vertical line to middle. So it kind of aligns this label with the checkbox. But we're still not there quite yet, so I'm gonna add an additional margin top of -3 pixels, and that should put it right where it's supposed to be. Now let's create the hover and focus states. So we're gonna say, &:hover::before, &:focus::before {. What this basically means is that on input[type= *checkbox*]. hover, we're selecting the before pseudo elements. Let me actually show you the compiled CSS. Actually, it's blank right now, because I don't have a style here. But let's do this background color. We'll use grey 110. Let's also add a quick transition here, all 0.2 seconds. He's in and out. Okay, so now, let me show you the compiled CSS, just in case you're not very familiar with SaaS, and you don't know what's happening there. Should be down here, okay, so there it is. So input type, checkbox, plus label on hover before. This line here is generated from, This line here, all right? It's the way SaaS works, I can nest properties. Hopefully you can understand this code. If you don't, simply open up the CodePen that's linked in the lesson notes and go here, and say View Compiled CSS. And that's gonna give you just vanilla CSS, and hopefully you can follow along much easier like that. Okay, so we have the checkbox, and we have some hover, some focus states, nice. But we don't have the checked state, right, which is the most important thing. So let's go here and say when the input type checkbox has the status, or the attribute of checked. Then we're gonna target this, which is the input type checkbox plus label, and we're gonna target the before pseudo element. And then let's go and into our Conversion tool here. Choose File, choose the checkmark that we exported earlier. Make sure the output format is still CSS background image. Encode, and now copy this and paste it in here. Okay, so it's there. We can barely see it, but we need to add that blue background as well. So instead of background image, I'm gonna use the background properly. I'm gonna say blue 100. So now, We can see that more clearly. Let's also alter the other background properties to display that image only once. So background-repeat, no-repeat, background-position. It's gonna be center center, perfect. And background size, let's go with 16 pixels. That's a bit too much, so maybe 14, maybe 12. I think 12 looks just fine. And also, let's change the border color to the color of our overall background, which is gray 120. So now, look at that, a custom made checkbox, very, very simple. So again, how do we do this? Well, we first hide the original checkbox. You couldn't see it before, because I have appearance set to none, and that was hiding the original control. But just in case you did see it, you would set display to none, and it will hide the original checkbox completely. Then we would create a pseudo element on the associated label, and we would style that one accordingly. For the check, we simply use the background image of the SVG file that we got from here. And we set the correct background properties, and we're done. This is now a functioning checkbox. So now we can move on to the next element on our list, which is radio buttons. We'll cover that in the next lesson.

Back to the top