Guide to Working With Checkbox CSS Style

The checkbox is an HTML form element rendered as a small square-shaped box by default. They are used to take inputs from users. When a user selects a checkbox, it is tick-marked; hence, the name checkbox. You can use CSS checkbox styling to enhance the appearance of the element. Without CSS checkbox style, they will have a default look. It means that your website will look identical to other websites using default checkboxes, making it appear dull. Therefore, it is important to style the element to make your website look different and unique.

To style a checkbox, you first need to hide the default one. You can then use your creativity to style the element and make it appealing.

A checkbox allows users to select one or more options from a list. Hence, it is a significant HTML form element if you want to give multiple options to your users, and allow them to select either one or multiple options. However, if you want to restrict users from selecting only one option, a radio button is better.

Note: Radio buttons work similar to checkboxes with a single primary difference. Checkboxes are used as single values, whereas radio buttons are grouped into a single set. Hence, you can only select a single value with radio buttons, whereas checkboxes allow selecting multiple options.

Examples for Creating a Custom Checkbox CSS Style

Styling a checkbox can be very challenging. Hence, going through some easy-to-follow examples is the best way to learn how to style a checkbox using CSS. We will be creating a custom checkbox using multiple pseudo-classes like checked, before, and after, for this example. With these pseudo-classes, we will try to create a ripple effect. So, whenever a checkbox is selected, you will see a ripple effect across the checkbox, making it look attractive.

Example:

Here’s how the code will look:

HTML Code:

<!DOCTYPE html>

<html>

<head>

<title>Checkbox example</title>

</head>

<body>

<h1>Hobby</h1>

<label class="checkbox-label">Sports

</label>

</div>

<label class="checkbox-label">Music

</label>

</div>

<label class="checkbox-label">Dancing

</label>

</div>

<label class="checkbox-label">Cooking

</label>

</div>

</body>

</html>

CSS Code:

body{

text-align: center;

}

.check_example{

width: 400px;

margin: 30px auto;

clear: both;

display: block;

background-color: Red;

border-radius: 5px;

}

.check_example::after{

clear: both;

display: block;

content: "";

}

.check_example .check-container{

float: left;

width: 50%;

box-sizing: border-box;

text-align:center;

padding: 20px 0px;

}

/* Here we start styling the checkboxes */

.checkbox-label{

color: white;

display: block;

position: relative;

margin: auto;

cursor: pointer;

font-size: 20px;

line-height: 20px;

height: 75px;

width: 30px;

clear: both;

}

.checkbox-label input{

position: absolute;

opacity: 0;

cursor: pointer;

}

.checkbox-label .check{

top:30px;

position: absolute;

height: 30px;

width: 30px;

background-color: transparent;

border-radius: 10px;

transition: all 0.5s ease-in;

border: 2px solid white;

}

.checkbox-label input:checked ~ .check {

background-color: white;

border-radius: 5px;

transform: rotate(0deg) scale(1);

opacity:1;

border: 2px solid white;

}

.checkbox-label .check::after {

position: absolute;

content: "";

border-radius: 5px;

}

.checkbox-label input:checked ~ .check::after {

transform: rotate(45deg) scale(1);

left: 10px;

top: 4px;

width: 8px;

height: 12px;

border: solid red;

border-width: 0 4px 4px 0;

border-radius: 0;

}

/* This part of the code will create the ripple effect transition */

.checkbox-label .check::before {

position: absolute;

content: "";

border-radius: 10px;

border: 10px solid white;

transform: scale(0);

}

.checkbox-label input:checked ~ .check::before {

left: -3px;

top: -3px;

width: 30px;

height: 30px;

border-radius: 10px;

transform: scale(3);

opacity:0;

transition: all 2s ease-out;

}

Output:

Checkbox_CSS_1

Checkbox_CSS_2

Checkbox_CSS_3