FREELessons: 10Length: 34 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Checked Checkboxes

This lesson proves that very simple tricks can go a long way towards improving a design. In this video, you will learn how to change the styling of a checkbox label when the associated checkbox has been checked.

Relevant Links

2.6 Checked Checkboxes

Hello and welcome back. When we're dealing with checklists in HTML, the defaults often leave a little bit to be desired. If we were to check a couple of these options, for example, we can see the boxes that are checked, but it would be nice if we had some way to really make these labels stand out once the check box is next to them are checked. That way, we can really tell at a glance which items have been checked. Well, we're gonna take a look at how to do that in CSS. So you can find the URL for your starting pen in your course notes for this lesson, and once you open that up, let's click on Fork to create a new copy, and we'll start with that. So all we have here is a H1 followed by a series of inputs and labels for those inputs. So let's jump into CSS and this is actually going to be very, very simple. The first thing I want to do is I want to lighten up the color of these labels. So I'm gonna point to the label element and I'm gonna set the text color to a light gray. And that will lighten them a little bit. Now, whenever we check one of the check boxes, I wanna darken up the text next to it as well so that we can really tell at a glance which items have been checked. So, what we're gonna do in the RCSS is we're gonna look for check boxes that have been checked, and we're gonna look at the labels that come right after them. But as you'll notice in our HTML, each one of those labels comes immediately after the input that we're talking about. So we can do that by pointing to any input that has a type of checkbox, but we only wanna do it if the checkbox is checked. So we're gonna type :checked. But we don't want to actually point to checkbox itself. We wanna point to the label that comes immediately after that checkbox that has been checked. And the way we point to an element that immediately follows another element in CSS is we use the plus sign. So after that :checked we're gonna say + and then, we're going to point to label. And then we'll put our opening and closing curly brackets. So we're looking for the label that immediately follows a checked check box. And we're going to change the text color of that label to another value. I'm going to change it to steel blue here. So let's test that and see if it works, we're gonna put a check here, and you'll see that the text changes color as well, and this is very, very simple CSS trick, but it's one that many people don't think to do. But again, you can tell just at a glance which one of these items has been checked. And I think that's a really nice effect and it adds a lot to the usability of your page. So once again, thank you so much for watching and I'll see you in the next lesson.

Back to the top