How to Add Image in Checkbox in HTML?

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To Learn How to Add an Image in a Checkbox in HTML. An Image checkbox is nothing but when we click on a particular image the image will be responded to as checked by showing a tick symbol which is known as an image checkbox.

In this article, we learn How to Add Images in the Checkbox in Html and Style Using Css. So Now We are going to create this project and for that, we were adding the HTML code first. Image checkbox is type an option image type in which as the user clicks on the image the checkbox image will get checked.

50+ HTML, CSS & JavaScript Projects With Source Code

HTML CODE For Image Checkbox

<ul>
  <li>
    <input type="checkbox" id="myCheckbox1" />
    <label for="myCheckbox1"><img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" /></label>
  </li>
  <li>

    <input type="checkbox" id="myCheckbox2" />
    <label for="myCheckbox2"><img src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" /></label>
  </li>
  <li>

    <input type="checkbox" id="myCheckbox3" />
    <label for="myCheckbox3"><img src="http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png" /></label>
  </li>
</ul>

In this HTML code we are first adding an input tag with option has checkbox and inside of it we are adding an label tag with image which comes under the list types. The list types were specifically used for any purpose in CSS.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Likewise we are creating another two class by adding specific images as same as the first but the change in class names would appear. So that’s all for HTML code , Now we can move onto CSS for making it some stylings and adding checkbox arrows in it.

HTML Output:

The Respective code is given down below.

CSS CODE For Image Checkbox

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="myCheckbox"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
}

label:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked + label {
  border-color: #ddd;
}

:checked + label:before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked + label img {
  transform: scale(0.9);
  /* box-shadow: 0 0 5px #333; */
  z-index: -1;
}

In The First Part we fixing all the images to be list-style-type for none so when we click on it the border wont appear and In second part we calling the li and making it to display in same line by using display: block property.

Ecommerce Website Using Html Css And Javascript Source Code

In Third part , we are adding the input option to be none and next we aligning and adding some styling properties to the label class which contains the image. The properties is just a margin and padding and a position , border and display.  these are used for making contents which means images relative to another content and to make it lie all the images in straight line we are using block in display property.

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="myCheckbox"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
}

After this , We are adding some properties to images and the images checkbox by adding the properties that makes to look like an checked option.

label:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

The Last thing is we are adding animation for the checkbox to appear the symbol in given time and for displaying the check option when user clicks on it. The z-index may used for lapping with elements which means that symbol.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

The main thing used here is transform scale property which makes the tick symbol and other are common and repeated properties.

:checked + label {
  border-color: #ddd;
}

:checked + label:before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked + label img {
  transform: scale(0.9);
  /* box-shadow: 0 0 5px #333; */
  z-index: -1;
}

Now We completed adding the source code to our project and we came to end now but before we could make use of the project preview in the given Output section.

CSS Output:

Video Output:

 Add Image in Checkbox in HTML and CSS

Now We have Successfully created our Image Checkbox Using HTML & CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

Simple Portfolio Website Using Html And Css With Source Code

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE – Kadir Firat

WRITTEN BY – Ragunathan S