How To Create Checkboxes In HTML With help of CSS

Today we will learn how to create custom checkboxes using CSS, HTML.

These are the Steps to Create Checkboxes In HTML with Help Of CSS.For Create checkbox Follow The Steps Which Given Below

DEMO DOWNLOAD
Firstly create Two Pages

.index.html

.Sytle.css

In index.html We write the Html markup codes. And in Style.css we write all CSS code.

1.Write an HTML Code for Checkbox.

<!DOCTYPE html>

<head>

</head>

<body>

<h3>Create Custom Checkboxes-Digital Magnate</h3>

<h4>Custom Checkboxes-Digital Magnate</h4>

</div>

</div>

</div>

in this html

we create two div left and right. in right div we have simple text and in left div we have a check box.

2.Now Write CSS for Checkbox

Now write CSS code for checkbox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
body {
	font-family:Arial, Helvetica, sans-serif;
text-align: center;
}
.checkboxs:before, .checkboxs:after {
	content: "";
	display: table;
}
.checkboxs:after {
	clear: both;
}
.left{
	float: left;
	margin: 10px;
}
.right{
	float: left;
	margin: 13px;
	font-weight:bold;
}

/* .checkbox start*/
.checkbox {
  width: 20px;
  position: relative;
}
.checkbox label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 2px;
    box-shadow: inset 0px 1px 1px white, 3px 3px 9px rgba(0,0,0,0.5);
    border: 2px solid #babbbc;
}
.checkbox label:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid ;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
    }
.checkbox label:hover::after {
      opacity: 0.5;
    }
.checkbox input[type=checkbox] {
    visibility: hidden;
}
.checkbox input[type=checkbox]:checked + label:after {
      opacity: 1;
    }	
/* .checkbox end */

in This CSS

we have hidden real checkbox button and using label on it as our checkbox button, when someone click on label, it will actually checked our real checkbox which is hidden. Label is also checked using CSS when our checkbox is checked.

Now your Custom checkbox are ready.

If you found this tutorial helpful, share it with your friends and developers group.

For More Tutorials Visit: https://digitalmagnate.blogspot.com/
Facebook:- https://www.facebook.com/Magnatedigital
Blog:- https://digitalmagnate.blogspot.com/
Instagram:- https://www.instagram.com/digimagnate/
Ytube:-https://www.youtube.com/channel/UCkLpHz87jibAFmP0L1BrarA?sub_confirmation=1