A checkbox is displayed as a ticked (checked) square box when enabled. Checkboxes are used to allow a user to select among a number of options. The difference between checkboxes and radio buttons is that you can select all the provided options simultaneously when a checkbox is used, while in the case of radio buttons, only one option can be selected.
In this snippet, we will learn how to to change the size of a checkbox. Here, two methods are presented.
You can set the checkbox size by using the CSS width and height properties. Use the height property to set the height of the checkbox and the width property to set the width of the checkbox.
Your code will look like this:
input./*checkbox class name*/ {
width: /*preferred width*/;
height: /*preferred height*/;
}
Now let’s see an example to understand how to do it.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input.larger {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Checkbox size example</h2>
<p>Default checkbox size:</p>
<input type="checkbox" name="checkBox1" checked>
<p>A larger checkbox:</p>
<input type="checkbox" class="larger" name="checkBox2" checked>
</body>
</html>
An alternative approach that also works for Mozilla Firefox is to use the CSS transform property. This method works well for Chrome as well.
The code syntax will be like this:
input./*checkbox class name*/ {
transform: scale(/*preferred magnification*/);
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input.larger {
transform: scale(5);
margin: 30px;
}
</style>
</head>
<body>
<p>Default checkbox size:</p>
<input type="checkbox" name="checkBox1" checked>
<p>A larger checkbox:</p>
<input type="checkbox" class="larger" name="checkBox2" checked>
</body>
</html>