How to increase the checkbox size in CSS?

We often need to increase the size of the checkbox as the default checkbox is very small in size. With CSS it is pretty easy to increase or decrease the size of a checkbox.

The easiest way to increase the size of the checkbox is by using CSS width and height properties. Using these two properties we can easily set any custom width and height of the checkbox.

Here is a live example:


   width: 20px;
   height: 20px;
   width: 30px;
   height: 30px;
   width: 40px;
   height: 40px;
   width: 50px;
   height: 50px;