Style checkboxes using custom CSS on your website

To make a better user experience, you can modify the checkbox. You can resize it in different ways.

I briefly discussed a few productive ways.

Different ways to style checkboxes

1: Use transform property

You can define scale value from transform property to resize checkbox. The following code will change all your checkboxes within the web page. 

input[type=checkbox] {
    transform: scale(1.5);
}

It can make some problems to recognize the code above for some browsers. So you should use some vendor prefix like below. 

input[type=checkbox]{
  -ms-transform: scale(1.5); /* Internet Explorer */  
  -moz-transform: scale(1.5); /* Fire Fox */
  -webkit-transform: scale(1.5); /* Safari and Chrome */ 
  -o-transform: scale(1.5); /* Opera */  
  transform: scale(1.5);
  padding: 10px;
}

2: Use the zoom property

You can get better results by using the zoom property. From my perspective, it makes a clearer image than transform property. The browser will use the non-standard zoom feature if it is supported (nice quality) or standard property transform: scale (blurry).

input[type="checkbox"] {
    zoom: 1.5;
}

3: Change the content value 

Another way to modify the checkbox is to define content value. To do this you should hide the default checkbox. But I don't like this method because sometimes it makes different sizes for the checked and unchecked icons. 

input[type="checkbox"] {display:none;}
input[type="checkbox"] + label:before {content:"☐ "; color:blue; font-size:20px}
input:checked + label:before {content:"☑ ";font-size:13px}

You can use bootstrap also to show your desired result.

<input id="check" type="checkbox"><label for="check">Checkbox</label>

Note: Setting display: none on input will prevent it from being selected with the tab key.

There are also some other ways to style checkboxes, but the above ones can be enough for you.