Hey everyone. First of all, a happy new year to all of you. And welcome to yet another exciting tutorial. In today’s tutorial, we will learn how to use an image as a checkbox. Even though this sounds a bit complicated at first, I assure you it is super simple. And the best thing is you don’t even need javascript to achieve this result. All you need is HTML and CSS. Now let us begin with the tutorial.
Video Tutorial:
If you like to learn by coding along to a video tutorial then check out the video version of this tutorial down below. Also do subscribe to my youtube channel for the best tips, tricks and tutorials on web development and design.
Project Folder Structure:
Now before we begin the coding we need to create a project folder. Let us take a look at how our project folder structure is going to be like. We create a folder called – Image As Checkbox. Inside this folder, we have an HTML document, a stylesheet, a script file and 3 images.
We name the HTML document index.html, the stylesheet as style.css and the script file as script.js. The three image files are the pictures we want to use for our checkbox. You can use any image of your choice.
I have used images of 3 different desserts here. These images are from Unsplash. You can download them along with the source code.
HTML:
We begin with the HTML section. We first need to copy and paste the font awesome CDN into the head section of our HTML file. Next, we create the layout required for our project. We start by creating g a div with a class name wrapper.
In the wrapper, we have three divs with a class name container. Each container consists of a checkbox with a unique id and a label. The unique id of the checkbox is assigned as the ‘for’ attribute of the corresponding label. The label tag encloses the image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image As Checkbox</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<input type="checkbox" id="dessert-1" />
<label for="dessert-1">
<img src="dessert-01.png" />
</label>
</div>
<div class="container">
<input type="checkbox" id="dessert-2" />
<label for="dessert-2">
<img src="dessert-02.png" />
</label>
</div>
<div class="container">
<input type="checkbox" id="dessert-3" />
<label for="dessert-3">
<img src="dessert-03.png" />
</label>
</div>
</div>
</body>
</html>
CSS:
Now we use CSS to style this checkbox as an image. We start by hiding the default appearance of the checkbox. Next, we use the after pseudo-element to display an unchecked and checked icon. This gives an illusion of a custom checkbox. We then add custom width to the image to fit the container and set the cursor to the pointer.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #eef5ff;
}
.wrapper {
width: 100%;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: grid;
place-items: center;
gap: 15px;
}
.container {
height: 200px;
width: 200px;
background-color: #ffffff;
box-shadow: 0 0 25px rgba(17, 1, 68, 0.08);
border-radius: 8px;
position: relative;
cursor: pointer;
}
input[type="checkbox"] {
-webkit-appearance: none;
position: relative;
width: 100%;
cursor: pointer;
}
input[type="checkbox"]:after {
position: absolute;
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f111";
font-size: 18px;
color: #478bfb;
right: 10px;
top: -5px;
}
input[type="checkbox"]:checked:after {
font-weight: 900;
content: "\f058";
color: #478bfb;
}
.container img {
width: 70%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
cursor: pointer;
}
@media screen and (min-width: 950px) {
.wrapper {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.container {
height: 300px;
width: 300px;
}
input[type="checkbox"]:after {
font-size: 22px;
}
}
Finally to make this responsive we use media queries with a breakpoint set at min-width: 950px. That’s it our checkbox with an image is now ready.
If you have issues you can download the source code by clicking on the download code button below. Don’t forget to drop your queries, suggestions and feedbacks in the comments below.
Happy Coding.
Great article.Thank you!