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:

Example:

input.ch1{
   width: 20px;
   height: 20px;
}
input.ch2{
   width: 30px;
   height: 30px;
}
input.ch3{
   width: 40px;
   height: 40px;
}
input.ch4{
   width: 50px;
   height: 50px;
}

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.