<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<title></title>
</head>
<body>
<div class="main">
<div class="style1">
	<input type="checkbox" name="style1" id="style1">
	<label for="style1"> Check It Style 1</label>
</div>
<!-- style end -->
<div class="style2">
	<input type="checkbox" name="style2" id="style2">
	<label for="style2"> Check It Style 2</label>
</div>
<!-- style end -->
<div class="style3">
	<input type="checkbox" name="style3" id="style3">
	<label for="style3"> Check It Style 3</label>
</div>
<!-- style end -->
<div class="style4">
	<input type="checkbox" name="style4" id="style4">
	<label for="style4"> Check It Style 4</label>
</div>
<!-- style end -->
<div class="style5">
	<input type="checkbox" name="style5" id="style5">
	<label for="style5"> Check It Style 5</label>
</div>
<!-- style end -->
</div>
</body>
</html>
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css);
.main{
    min-height: 100vh;
    text-align: center;
}
.main input{
    display: none;
}
.main label{
    position: relative;
    padding: 10px;
    padding-left: 50px;
    font-weight: bold;
    text-transform: uppercase;
}
.style1 label:before{
    position: absolute;
    content: "";
    padding: 10px;
    border:4px solid #990012;
    left: 0;
}
.style1 input:checked + label:after{
    position: absolute;
    font-family: fontawesome;
    content: "\f00c";
    color: #ee4e34;
    font-size: 37px;
    left: 4px;
    top: -6px;
}
.style2 label:before{
    position: absolute;
    content: "";
    padding: 10px;
    border:4px solid #990012;
    left: 0;
    border-radius: 100%;
}
.style2 input:checked + label:after{
    content: "";
    position: absolute;
    background: #ee4e34;
    padding: 7px;
    left: 7px;
    top: 17px;
     border-radius: 100%;
}

.style3 label:before{
    position: absolute;
    content: "";
    padding: 10px;
    border:4px solid #990012;
    left: 0;
   overflow: hidden;
   z-index: 2
}
.style3 input:checked + label:after{
    font-family: fontawesome;
    content: "\f00c";
    position: absolute;
    background: #ee4e34;
    color: #fff;
    padding:2px;
    left: 4px;
    top: 10px;
}
.style4 label:before{
    position: absolute;
    content: "";
    padding: 10px;
    border:4px solid #990012;
    left: 0;
   overflow: hidden;
}
.style4 input:checked + label:after{
    /*font-family: fontawesome;*/
    content: "";
    position: absolute;
    background: #990012;
    padding: 14px;
    left: 0px;
    top: 10px;
}
.style5 label:before{
    position: absolute;
    content: "";
    padding: 10px;
    border:4px solid #990012;
    left: 0;
   overflow: hidden;
}
.style5 input:checked + label:after{
    /*font-family: fontawesome;*/
    content: "";
    position: absolute;
    background: #990012;
    padding: 6px;
    left: 8px;
    top: 18px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.