How to create custom checkboxes and radio buttons with CSS?

CSS Web Development Front End Technology

Following is the code to create a responsive navigation menu with a login form inside of it −

Example

<!DOCTYPE html>
<html>
<style>
.checkboxContainer {
   display: block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 22px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.checkboxContainer input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
}
.checkboxMarked {
   position: absolute;
   top: 0;
   left: 0;
   height: 25px;
   width: 25px;
   background-color: #eee;
}
.checkboxContainer:hover input ~ .checkboxMarked {
   background-color: rgb(205, 255, 199);
}
.checkboxContainer input:checked ~ .checkboxMarked {
   background-color: rgb(5, 170, 32);
}
.checkboxMarked:after {
   content: "";
   position: absolute;
   display: none;
}
.checkboxContainer input:checked ~ .checkboxMarked:after {
   display: block;
}
.checkboxContainer .checkboxMarked:after {
   left: 9px;
   top: 5px;
   width: 5px;
   height: 10px;
   border: solid white;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}
</style>
<body>
<h1>Custom Checkbox Example</h1>
<label class="checkboxContainer">Rice
   <input type="checkbox" checked="checked">
   <span class="checkboxMarked"></span>
</label>
<label class="checkboxContainer">Flour
   <input type="checkbox">
   <span class="checkboxMarked"></span>
</label>
</body>
</html>