A checkbox is shown as a ticked (checked) square box when empowered. Checkboxes are utilized to permit a client to choose among various choices. The contrast among checkboxes and radio buttons is that you can choose every one of the gave choices at the same time when a checkbox is utilized, while on account of radio buttons, just a single choice can be chosen.
In this scrap, we will figure out how to change the size of a checkbox. Here, two strategies are presented.This technique has a couple of downsides. The checkbox must be situated cautiously to keep it inside the program window or keep it from covering with different components. Additionally, in certain programs, the checkbox may seem pixelated for bigger sizes.
HTML is the underpinning of site pages, is utilized for site page advancement by organizing sites and web apps.You can gain HTML from the beginning by following this HTML Tutorial and HTML Examples.
CSS is the underpinning of site pages, is utilized for page advancement by styling sites and web apps.You can gain CSS from the beginning by following this CSS Tutorial and CSS Examples.
Method 1: The checkbox size can be set by using height and width property. The height property sets the height of checkbox and width property sets the width of the checkbox.
Syntax:
input./*checkbox class name*/ {
width : /*desired width*/;
height : /*desired height*/;
}
Example:
<!DOCTYPE html> <html> <head> <title> Set checkbox size </title> <!-- Style to set the size of checkbox --> <style> input.largerCheckbox { width: 40px; height: 40px; } </style></head> <body> <input type="checkbox" class="defaultCheckbox" name="checkBox1" checked> <input type="checkbox" class="largerCheckbox" name="checkBox2" checked></body> </html> |
Output:
Done
Note: This works well for Google Chrome, Microsoft Edge and Internet Explorer. In Mozilla Firefox the clickable checkbox area is as specified but it displays a checkbox of the default size
Method 2: An alternate solution that works for Mozilla Firefox as well is by using transform property.
Syntax:
input./*checkbox class name*/ {
transform : scale(/*desired magnification*/);
}
Example:
<!DOCTYPE html> <html> <head> <title> Set the size of checkbox </title> <!-- Use transform scale property to set size of checkbox --> <style> input.largerCheckbox { transform : scale(10); } body { text-align:center; margin-top:100px; } </style></head> <body> <input type="checkbox" class="largerCheckbox" name="checkBox2" checked></body> </html> |
Output:
Done