Hit enter after type your search item
Home / CSS / How to create and style HTML checkbox with pure CSS and a plug-in

How to create and style HTML checkbox with pure CSS and a plug-in

The checkbox tag

In HTML, you can create a checkbox by using the <input> tag and specify the type = checkbox, as shown in the syntax below:

<input type=”checkbox” name=”checkboxName” value=”Value_of_checkbox”>

In this tutorial, I will show you how you can create checkboxes in HTML forms.

I will also explain how you may style checkboxes by CSS and a plug-in and how you may use the checkbox value after the form is submitted, so keep reading!

An example of creating a single checkbox in HTML form

In this example, a checkbox is created by using the <input> tag. I used only basic attributes to demonstrate how a checkbox can be created. See the demo and code online:

HTML checkbox

See online demo and code

Accessing the value of checkbox in PHP script

You may access the value of a checkbox by using the name attribute. See the following example, where a checkbox is created and its value is accessed in PHP script. To test it, tick the checkbox and press the submit button.

HTML checkbox value

See online demo and code

If a checkbox is checked, it evaluates as true otherwise false. If a checkbox is unchecked, it sends an empty value. You may get the value of checkbox only if it was checked.

In the if statement of example, first I evaluated if the check was checked or not. If it was true, the value is displayed by using the $_POST[“”] array. The following code is used in the example for creating a checkbox in HTML:


 

This is the PHP script used to access the value:


 

Using checked attribute in a checkbox demo

By using the checked attribute, the checkbox will be ticked as web page loads. In this example, I used checked attribute and accessed its value in PHP script.

As you press the submit button, the value of the checkbox will be checked, just like in above example. See the demo online:

HTML checkbox checked

See online demo and code

This is how checkbox was created in this example:


 

See the complete code with PHP in the demo page.

Styling checkboxes with CSS example

Styling different elements of the web page by CSS are easier including div, paragraphs, lists, tables etc. Similarly, form controls like textboxes, textarea, buttons can be styled quite easily by using CSS/CSS3 properties.

However, styling the checkbox and radio button is a bit tricky task. There are many plug-ins that use JavaScript and enables us to create beautiful checkboxes including switches. One such plug-in is used in examples at the last part of this guide, that uses Bootstrap framework.

Let me show you pure CSS based checkboxes first where I changed the borders and default checked properties of a checkbox of HTML. See the demo online:

HTML CSS checkbox

See online demo and code

See the complete code including checkbox CSS in the demo page.

CSS Style 2 for the checkbox

The following checkbox is a green colored theme with dark green border. When checked, it is relatively dark green than in unchecked state. The borders are less rounded than above example.

HTML CSS checkbox green

See online demo and code

Rounded checkbox with reddish theme

This is a rounded checkbox where I used red colors for border, checked and unchecked states. See the live demo and code online by clicking the image or link below:

HTML round checkbox

See online demo and code

Larger checkbox with thicker tick mark

The following is a larger checkbox with thicker and different colored tick mark. You can change the properties of tick by changing this class in the code:


 

See complete code on the demo page:

HTML checkbox large

See online demo and code

Similarly, you can change the properties and try a different style, colors etc by modifying the above code to match checkbox with the rest of form elements in your web project that uses pure CSS/CSS3.

Credit: This Github page

A demo of using Bootstrap based plug-in to create checkbox

If you are working in Bootstrap framework for your project then there is a nice plug-in for creating beautiful checkboxes.

The plug-in is awesome-bootstrap-checkbox which is explained in Bootstrap checkbox tutorial here. See the demo online with code where I created a few checkboxes by using this plug-in

HTML checkbox bootstrap

See online demo and code

You can use all above CSS styled plug-in in HTML forms just like shown in the first three examples. The PHP or some other scripting can be used to access its value and perform the action accordingly.

This div height required for enabling the sticky sidebar