Styling checkboxes is one of the most common issues for developers. This is because unlike other elements styling a checkbox isn’t that straightforward. You can’t customize the checkbox by simply changing the background colour or font colour. Even though customizing the checkbox sounds like a complicated task, don’t worry. This tutorial will guide you step by step so you can create your very own customized checkbox.
In this tutorial, we will customize the checkbox to make it look like a checkbox tile. Now, what is a checkbox tile. A checkbox tile consists of a checkbox(of course) along with a label and an icon. If you like you can even add some text. The idea is this whole thing is clickable individually, as well as on the whole.
I had styled the radio button as tiles previously. You can check the tutorial here. But never thought about doing the same for checkboxes until I saw this codepen.
I have used a clean UI to create this checkbox group. For this tutorial, we will be using HTML and Pure CSS. I am using font awesome icons. Let us start the tutorial.
Video Tutorial:
Before we move on to the actual tutorial, you can check out the video tutorial of this post here:
Â
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file.
We start by creating a section element. The section element has 3 ‘div’ elements with the class name ’tile’. Now, inside each of these tiles, we have a checkbox and a label. The label consists of an icon and a heading. Remember to link the correct checkbox id to their corresponding labels. Without the right ids, clicking on the labels won’t get your checkbox checked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox as tiles</title>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="tile">
<input type="checkbox" name="sports" id="sport1">
<label for="sport1">
<i class="fas fa-basketball-ball"></i>
<h6>Basketball</h6>
</label>
</div>
<div class="tile">
<input type="checkbox" name="sports" id="sport2">
<label for="sport2">
<i class="fas fa-swimmer"></i>
<h6>Swimming</h6>
</label>
</div>
<div class="tile">
<input type="checkbox" name="sports" id="sport3">
<label for="sport3">
<i class="fas fa-quidditch"></i>
<h6>Quidditch</h6>
</label>
</div>
</section>
</body>
</html>
CSS:
Now, that all the needed elements are created we add styles. For this create a stylesheet – ‘style.css’. Copy the code below and paste it into your stylesheet.
In CSS, we space out the tiles by using the flex layout and setting the ‘justify-content’ to ‘space-around’. We centre the tiles vertically with the ‘align-items’ property.
We set the height and width for the tile.
To style the checkbox, we start by hiding the default appearance of the checkbox with the ‘appearance’ property. Now we are free to set dimensions and add background colour and other styles to the checkbox.
We use the ‘after’ pseudo-element to add the empty circle icon. You can style the contents of the label as per your choice. Feel free to be creative here. When the user clicks on the tile, the checkbox gets checked. The empty circle icon is replaced with the checkbox icon.
Lastly, we add a subtle scale up animation to the icon inside the label. This animation plays when the user selects the checkbox.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #f5f7ff;
}
section{
width: 100vmin;
height: 100vh;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}
.tile{
height: 200px;
width: 170px;
position: relative;
}
input[type="checkbox"]{
-webkit-appearance: none;
position: relative;
height: 100%;
width: 100%;
background-color: #ffffff;
border-radius: 10px;
cursor: pointer;
border: 3px solid transparent;
outline: none;
box-shadow: 15px 15px 25px rgba(2,28,53,0.05);
}
input[type="checkbox"]:after{
position: absolute;
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f111";
font-size: 22px;
top: 10px;
left: 10px;
color: #e2e6f3;
}
input[type="checkbox"]:hover{
transform: scale(1.08);
}
input[type="checkbox"]:checked{
border: 3px solid #478bfb;
}
input[type="checkbox"]:checked:after{
font-weight: 900;
content: "\f058";
color: #478bfb;
}
label{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
height: 80%;
width: 100%;
position: absolute;
bottom: 0;
cursor: pointer;
}
label .fas{
font-size: 60px;
color: #2c2c51;
}
input[type="checkbox"]:checked + label .fas{
animation: grow 0.5s;
}
@keyframes grow{
50%{
font-size: 80px;
}
}
label h6{
font-family: "Poppins",sans-serif;
font-size: 15px;
font-weight: 400;
color: #7b7b93;
}
That’s it for this tutorial. If you like this tutorial, do check out my youtube channel. I would love to hear your comments, suggestions and feedbacks. Do drop them below. We will meet soon in yet another awesome tutorial.
