Home Web Design CSS CSS Minimal Checkbox With SVG Tick | Custom Checkbox Input

CSS Minimal Checkbox With SVG Tick | Custom Checkbox Input

October 7, 2019

13650

How we can create a custom checkbox with a flat and minimal design using CSS? Solution: See this CSS Minimal Checkbox With SVG Tick, Custom Checkbox Input.

Previously I have shared some Checkbox Programs, but this one has flat design and with SVG tick icon. Basically, The <input type=”checkbox”> defines a checkbox. And by default checkbox is shown as a square box that is ticked (checked) when activated. We can also customize it as we want using CSS.

Today you will learn to create Custom Checkbox Input with tick icon. Basically, there are two checkboxes with flat and minimal design, and when it will check then a right tick icon appear which is an SVG shape. I have placed two checkboxes for only looking good, this is a lightweight flat checkbox which you can use on your websites like on term agree, and radio buttons, etc places.

So, Today I am sharing CSS Minimal Checkbox With SVG Tick Icon. There I have used only HTML and CSS, and for easy work created SVG icon file and uploaded on server and put in radio button as a background image. You can call this a custom checkbox input using pure CSS. If you want to use this on your website, then you have just customized the color according to your choice.

If you are thinking now how this minimal checkbox actually is, then see the preview given below.

Preview Of Custom Checkbox Input With Flat Design

See this video preview to getting an idea of how this circular checkbox looks like.

https://webdevtrick.com/wp-content/uploads/css-minimal-checkbox.mp4?_=1

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

CSS Minimal Checkbox With SVG Tick Source Code

Before sharing source code, let’s talk about it. First I have created a div and put a checkbox input, a span, and a label inside it using HTML. For creating the checkbox I have simply used HTML <input type="checkbox"> tag and put the span for placing the SVG tick icon. And the span is blank there I have put just a class name.

Now using CSS I have placed all the elements on the right place, as you can see in the preview. Now I have placed the span over the checkbox and put the condition when checked the box will become green in the background color. After that, I have placed the SVG icon as a background image in the span on :after and for creating the animation effect used cubic-bezier transform (info).

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this design you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS Checkbox | Webdevtrick.com</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

  <div>
  <div class="chkbox">
    <input id="one" type="checkbox">
    <span class="check"></span>
    <label for="one">#1 Checkbox</label>
  </div>
  <div class="chkbox">
    <input id="two" type="checkbox">
    <span class="check"></span>
    <label for="two">#2 Checkbox</label>
  </div>
</div>
  
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS Checkbox | Webdevtrick.com</title>

</head>

<body>

<div>

<label for="one">#1 Checkbox</label>

</div>

<label for="two">#2 Checkbox</label>

</div>

</body>

</html>

style.css

Create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
@import url("https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap");
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-family: 'Quicksand', sans-serif;
  line-height: 1.5;
  font-weight: bold;
}
.chkbox {
  width: 300px;
  margin: 25px 0;
  display: flex;
  align-items: center;
  user-select: none;
}
.chkbox label {
  font-size: 26px;
  color: #4D4D4D;
  position: absolute;
  z-index: 10;
  padding-left: 50px;
  cursor: pointer;
}
.chkbox input {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
.chkbox input:checked ~ .check {
  border-color: #00ff8f;
  box-shadow: 0px 0px 0px 15px #00ff8f inset;
}
.chkbox input:checked ~ .check::after {
  opacity: 1;
  transform: scale(1);
}
.chkbox .check {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 100px;
  background-color: #FFF;
  border: 2px solid #00ff8f;
  box-shadow: 0px 0px 0px 0px #00ff8f inset;
  transition: all 0.15s cubic-bezier(0, 1.05, 0.72, 1.07);
}
.chkbox .check::after {
  content: '';
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 4;
  position: absolute;
  transform: scale(0);
  background-size: 50%;
  background-image: url("https://webdevtrick.com/demos/checkmark.svg");
  background-repeat: no-repeat;
  background-position: center;
  transition-delay: 0.2s !important;
  transition: all 0.25s cubic-bezier(0, 1.05, 0.72, 1.07);
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

@import url("https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap");

body {

margin: 0;

padding: 0;

width: 100%;

height: 100vh;

display: flex;

align-items: center;

flex-direction: column;

justify-content: center;

font-family: 'Quicksand', sans-serif;

line-height: 1.5;

font-weight: bold;

}

.chkbox {

width: 300px;

margin: 25px 0;

display: flex;

align-items: center;

user-select: none;

}

.chkbox label {

font-size: 26px;

color: #4D4D4D;

position: absolute;

z-index: 10;

padding-left: 50px;

cursor: pointer;

}

.chkbox input {

opacity: 0;

visibility: hidden;

position: absolute;

}

.chkbox input:checked ~ .check {

border-color: #00ff8f;

box-shadow: 0px 0px 0px 15px #00ff8f inset;

}

.chkbox input:checked ~ .check::after {

opacity: 1;

transform: scale(1);

}

.chkbox .check {

width: 30px;

height: 30px;

display: flex;

justify-content: center;

align-items: center;

position: relative;

border-radius: 100px;

background-color: #FFF;

border: 2px solid #00ff8f;

box-shadow: 0px 0px 0px 0px #00ff8f inset;

transition: all 0.15s cubic-bezier(0, 1.05, 0.72, 1.07);

}

.chkbox .check::after {

content: '';

width: 100%;

height: 100%;

opacity: 0;

z-index: 4;

position: absolute;

transform: scale(0);

background-size: 50%;

background-image: url("https://webdevtrick.com/demos/checkmark.svg");

background-repeat: no-repeat;

background-position: center;

transition-delay: 0.2s !important;

transition: all 0.25s cubic-bezier(0, 1.05, 0.72, 1.07);

}

That’s It. Now you have successfully created CSS Minimal Checkbox With SVG Tick, Custom Checkbox Input with flat design. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.