FREELessons: 20Length: 1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Create Custom Radio Buttons and Checkboxes

Customizing the look and feel of the default form elements is something every developer has to do at some point. Now, some of the controls are really hard to style (for example the select) but some are actually quite easy.

3.1 Create Custom Radio Buttons and Checkboxes

Customizing the look and feel of the default form elements is something every developer has to do at some point. Now some of the controls are really hard to style, for example the select, but some of them are actually quite easy. First of all, let's see a checkbox. So as you can see from our page here, we have a simple form with three radio buttons and a checkbox. And let me also show you the code here. So, form, fieldset with legend, and two paragraphs which contain the form elements. So this technique is actually very simple. First of all, we gotta target that input type checkbox, and we wanna hide it, so we're gonna say display: none, and this will get rid of the actual checkbox. And we're doing this because we want to create our custom one. Next up, again, input[type="checkbox"] + label:before. All right, so let me walk you through this. We have the checkbox, which is followed immediately by the label. Now, we're gonna use the before pseudo element of the label to create our actual checkbox. So, let's start with this background color. Let's make it white. Let's do a border of 1px solid. Let's make it a grey. Content, I'm gonna set it to none. We're gonna do a display of inline-block so it's positioned inline but also benefits from the block properties like width, height and so on. Let's specify a font size, about 12px. And then height, let's make it about 16px, and width, about 16px. And there it is. That's the start of our checkbox. Let's also add line-height. Again, of 16px, because we'll place some text inside it when it's checked. And then let's tamper with the margins a little bit. We need to push it down a few pixels, and also add a margin on the right to separate it from the label. So, we're gonna do margin, let's do -5px. On the top, let's do about 10px, on the right, 0 0. All right, that doesn't work that well. Let's add vertical-align: middle, so it's better aligned with the text. And actually, let's do a smaller top margin here, -2 and maybe about 6px, 6px on the right. So now, it actually looks like a proper checkbox. Now, the trick is when we click on it, we want a check mark inside it. And for that we're going to use the checked pseudo class. So we're gonna do again, input[type="checkbox"]:checked + label:before. So what we're doing here is basically targeting the before pseudo element of the label when the checkbox is in the checked state. So when that happens, we simply change the content of that before element. And for the content, I'm gonna do this, 2713. this is just a code for a check mark. And there it is. And that's it, basically. You just need to add a text-align: center; to center the check mark. And that's you basic checkbox. Of course, you can spend more time styling it, but the base method is this one. The same method actually applies for the radio buttons. So let's style those as well. I'm just gonna copy this bit since it's very similar. Gonna change this to radio. I'm also going to hide the normal radio button. All right, so background color white, border grey, content stays the same, display, font size, height we'll probably make this a bit smaller like 12 and 12. Okay, let's see how it looks like. Okay, so now they are square. We need to make them round, so we're gonna use the border radius property. And to make a circle, you will need to use a value that's half the width and height, so in our case it will be 6px, and that will create perfect circles. And let's also add the checked state, and the content is just gonna be a bullet this time, so 2022. All right let's see it. Okay, it's there but it's a bit small, so let's increase the font size to maybe 24px, so double that size. And also the line height should be about 12px. So now it's almost positioned in the middle, maybe 13. Maybe increase the font size a little bit to 26. Okay, that's a bit better. And that's it really, very easy customization using the checked pseudo class. Browser support for this is very generous. It works in all major browsers including IE9+. So unfortunately IE8 is not supported.

Back to the top