CSS Checkbox : Make Your Webpage More Attractive with Stylized Checkboxes

Udemy Editor

CSS (Cascading Style Sheets) add depth and vibrancy to an ordinary HTML document. The HTML language was never meant to contain tags that could be used to format the content of a document (change its look). There was a need for these tags, however- a need that HTML couldn’t fulfill completely. The HTML code was getting to be too complex, especially for large websites where multiple pages had to be formatted different. CSS was introduced by the World Wide Web Consortium to solve everyone’s programming woes.

Working with CSS requires a basic understanding of HTML (or XHTML). You can create a .css file (which stores different visual styles) that you can link to a regular HTML document. You can also use CSS code inside your HTML document (inline style and internal style sheets).

In this tutorial we’re going to look at how to write a simple CSS checkbox. We’re assuming you know the basics of HTML and CSS. If not, we recommend you first take this HTML and CSS course for beginners. We’ll be using a .css file and linking that file to your HTML document.

Why Do We Need a CSS Checkbox?

Do you know what a HTML checkbox is? Are you aware of the HTML checkbox tag? If you’re not, you might want to look at this basic HTML course first before proceeding with CSS checkboxes. In brief, a checkbox tag lets you create a clickable checkbox, just like the ones you come across while filling out forms online.

Now, why do you need to style an ordinary HTML checkbox? To make your website stand out from the others, of course! It’s possible to make attractive checkboxes that will change color when the user clicks on them, or to make a checkbox with sliders.

Creating a Simple Checkbox with CSS and HTML

We’ll start by creating a couple of simple checkboxes. We won’t be using the checkbox HTML tag, as is standard practice – this code is just to give you an idea of how CSS works, and how you can use it to design a checkbox. You can experiment with the code we’ve provided to make your own custom checkboxes.

First, we need to put the HTML code in place:

Yes!

Then proceed with the CSS code: .check { border: 2px solid red; width: 1.65em; height: 1.65em; display: inline-block; margin-right: 4px; }

You can copy-paste the code given above and see the result here: http://jsfiddle.net/

So what have we done exactly? Let’s start with the HTML code. Here, we’ve created a class called “check”. This class has been defined inside the

HTML tag. The

HTML tag lets you group together block-elements so they can be formatted with CSS- which is exactly what we’ve used it for. Now if you look at the CSS code, you can see that it is referencing the “check” class (.check {}). So when the browser encounters the “check” keyword, it will automatically go to CSS code that is linked to it.

We’ve created an “inline-block” type of element, which is nothing but a square block. The “inline-block” type of element forms our checkbox- it will appear as a square box on the screen once invoked. The checkbox will have a width of 1.65em, height of 1.65em, a solid black border which is 2px and the margin for the checkboxes is 4px. You can set any height or width you want. You can also change the color of the border to blue, green or any other color of your choice.

Code to Create a Checkbox that you Can Click

If you experimented with the code above, you’ll notice that you can’t actually click on the checkboxes we made. Why is that? To make your checkbox clickable, you have to use the checkbox HTML tag. The CSS code to modify a HTML tag can be pretty complex.

For example, www.csscheckbox.com has a pretty nifty collection of checkboxes, along with the code to make them. We’ll give you some sample code they’ve used to design some attractive checkboxes, along with a brief explanation of the code.

Target Checkboxes:

Option #1

Selected Option

Option #3

The HTML Code:

Option #1


Selected Option


Option #3
<!-- Checkbox powered by CssCheckbox.com →

The CSS code:

input[type=checkbox].css-checkbox {
 position: absolute;
 overflow: hidden;
 clip: rect(0 0 0 0);
 height:1px;
 width:1px;
 margin:-1px;
 padding:0;
 border:0;
 }
 input[type=checkbox].css-checkbox + label.css-label {
 padding-left:20px;
 height:17px;
 display:inline-block;
 line-height:17px;
 background-repeat:no-repeat;
 background-position: 0 0;
 font-size:15px;
 vertical-align:middle;
 cursor:pointer;
 }
 input[type=checkbox].css-checkbox:checked + label.css-label {
 background-position: 0 -17px;
 }
 .css-label{ background-image:url(http://csscheckbox.com/checkboxes/elegant.png); }

Explanation:

Looks complex? Practise with HTML and CSS coding will make it easier to understand. But let’s walk through it. If you look at first line of the code, the input type is defined as a “checkbox”. This is the HTML checkbox tag that is selected when you click on it. Three different checkboxes have been created, and each of the three textboxes has been assigned a different ID.

Then all three checkboxes have been linked to a label through their ID. These labels are what allow you to actually change the way a checkbox looks. You can give these labels different fonts and colors to customize your checkboxes. Once again you can see the “inline-block” element being used in the code.

Sometimes you need to hide your original checkbox, so that you can edit the label you’ve linked it to. You can do that with the following line of code:

input[type=checkbox] {
            visibility: hidden;
}

This will create a checkbox that won’t be visible on screen. You can assign it an ID and then link it to a label, which you will edit to look like your checkbox

As usual the best way to learn this better, is to try it out for yourself. Experiment with the code by changing the background position of the labels, change the alignment and changing the font size to see what you can do with CSS. Best would be to create your own webpage with CSS. Go ahead, try it out. It’s not as hard as it may seem. Even kids can learn to code with CSS.