Custom checkbox in CSS ? | Create a custom checkbox using CSS ?

Hello, guys welcome to Code With Random blog, today we learn How to create a custom checkbox? and types of checkboxes. We learn topics like how to style a custom checkbox and types of checkboxes like toggle, disabled, read-only and many more things about checkboxes.

Q. What is checkbox?

In our websites we use too many input elements for better enhancement of user experience like text, date, radio, etc. and checkbox is also an input tag we use for our websites. we use checkboxes when we want to provide user to verify his option and select multiple data objects and share their all information to us and HTML provides so much simple input tag or if we want an extra tremendous website so we need to create custom checkboxes and provide user a magnificent look of website/web apps so first have a simple HTML checkbox then we go to create our custom.

Basic HTML Checkbox:

Basic Checkbox 

HTML Structure of Custom Checkbox:-

   <div class="new">  
     <form>  
      <div class="form-group">  
       <input type="checkbox" id="html">  
       <label for="html">HTML</label>  
      </div>  
      <div class="form-group">  
       <input type="checkbox" id="css">  
       <label for="css">CSS</label>  
      </div>  
      <div class="form-group">  
       <input type="checkbox" id="javascript">  
       <label for="javascript">Javascript</label>  
      </div>  
      <div class="form-group">  
       <input type="checkbox" id="react">  
       <label for="react">React</label>  
      </div>  
     </form>  
    </div>  

I think I not need to provide HTML Boilerplate jokes apart lets discuss our code so we just use form, div, label, input:checkbox elements for our custom checkbox and class, id, type, for attributes or we use name tag also when we code for back-end functions and id element is if we want to write a clean code and its not sufficient for our custom checkbox so lets focus on output then go to styling... 

Output...

Our HTML Output 

Styling of Our Custom Checkbox:-

 *, *:before, *:after {  
   -webkit-box-sizing: border-box;  
   -moz-box-sizing: border-box;  
   box-sizing: border-box;  
   margin: 0;  
   padding: 0;  
  }  
  .new {  
   padding: 50px;  
  }  
  .form-group {  
   display: block;  
   margin-bottom: 15px;  
  }  
  .form-group input {  
   padding: 0;  
   height: initial;  
   width: initial;  
   margin-bottom: 0;  
   display: none;  
   cursor: pointer;  
  }  

First we go to style our new div and form-group and input by giving margin, padding, cursor, height, width, display and more... now we go to do our main work lets styles labels... and our inputs are hidden now.

Output...

CSS Output

 

Final Styling of Our Custom Checkbox:-

  .form-group label {  
   position: relative;  
   cursor: pointer;  
  }  
  .form-group label:before {  
   content:'';  
   -webkit-appearance: none;  
   background-color: transparent;  
   border: 2px solid #e94f4f;  
   box-shadow: 0 1px 2px rgba(228, 8, 8, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);  
   padding: 10px;  
   display: inline-block;  
   position: relative;  
   vertical-align: middle;  
   cursor: pointer;  
   margin-right: 5px;  
  }  
  .form-group input:checked + label:after {  
   content: '';  
   display: block;  
   position: absolute;  
   top: 2px;  
   left: 9px;  
   width: 6px;  
   height: 14px;  
   border: solid #0079bf;  
   border-width: 0 2px 2px 0;  
   transform: rotate(45deg);  
  }  

Here we use border, content, position, content, transform, vertical align or etc. properties give red Colour to border of input and blue for checks, transform the element by rotating 45deg, use box shadow for giving a shade finish.

Final Output...

Custom Checkbox

Type of Checkbox

1. Standard Checkbox

2. Slider
3. Toggle
4. Disabled
5. Read Only
6. Indeterminate

Hope you like this post and enjoy it. If we did any mistake please comment it down so this help full for also our users. Thank you for reading.

Written by Tushar Sharma
Team Code With Random