How to set checkbox size in HTML/CSS?
The checkbox is an HTML element which is used to take input from the user.
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:
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:
This method has a few drawbacks. The checkbox has to be positioned carefully to keep it within the browser window or prevent it from overlapping with other elements. Also, in some browsers, the checkbox may appear pixelated for larger sizes.
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Please Login to comment...