A checkbox allows users to select from several alternatives of the required function. When it is engaged in options, it appears as a marked or checked square box. Checkboxes allow users to select multiple options simultaneously in the user form. This article will examine two methods for changing or setting a checkbox's size.
Ways to set checkbox size
The checkbox size can be adjusted in the following manners. One approach involves configuring the CSS attributes for the checkbox component.
- Employing the width and height attributes within CSS
- Utilizing the transform attribute
Utilising the Width and Height Properties in CSS
The CSS height and width attributes determine the dimensions of the checkbox. Adjusting the checkbox's height and width is achievable by using the corresponding properties. To create a square checkbox, simply assign equal values to both the height and width properties.
Syntax
The subsequent code snippet establishes the dimensions of a checkbox by utilizing the height and width attributes.
Checkbox_element{
/* use width property */
width: value;
/* use height property */
height: value;
}
Examples
The provided instances demonstrate the necessary checkbox dimensions for the webpage. The dimensions also adjust post the checkbox element's hover effect through CSS.
Example 1:
The upcoming instances illustrate the necessary CSS adjustments for the size of checkboxes on a webpage. It is possible to define the dimensions of the checkbox component by specifying its height and width.
<!DOCTYPE html>
<html>
<head>
<title>
CSS checkbox size
</title>
<!-- Style to set the size of the checkbox -->
<style>
input#checkBox2 {
width: 20px;
height: 20px;
}
input#checkBox3 {
width: 36px;
height: 36px;
}
input#checkBox4 {
width: 20%;
height: 20%;
}
</style>
</head>
<body>
<h3> CSS Checkbox Size </h3>
<div>
<input type = "checkbox" id = "checkBox1" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox1" name = "JAVA" value = "JAVA"/> JAVA
<input type = "checkbox" id = "checkBox1" name = "CSS" value = "CSS" checked/> CSS
</div>
<br>
<div>
<input type = "checkbox" id = "checkBox2" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox2" name = "JAVA" value = "JAVA"/> JAVA
<input type = "checkbox" id = "checkBox2" name = "CSS" value = "CSS" checked/> CSS
</div>
<br>
<div>
<input type = "checkbox" id = "checkBox3" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox3" name = "JAVA" value = "JAVA" checked/> JAVA
<input type = "checkbox" id = "checkBox3" name = "CSS" value = "CSS" checked/> CSS
</div>
<br>
<div>
<input type = "checkbox" id = "checkBox4" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox4" name = "JAVA" value = "JAVA" checked/> JAVA
<input type = "checkbox" id = "checkBox4" name = "CSS" value = "CSS" checked/> CSS
</div>
</body>
</html>
Output
The output shows the CSS checkbox size.
Example 2:
The upcoming instances demonstrate the CSS checkbox dimensions along with the hover impact. The height and width of the checkbox element can be adjusted post hovering.
<!DOCTYPE html>
<html>
<head>
<title>
CSS checkbox size
</title>
<!-- Style to set the size of the checkbox -->
<style>
input#checkBox2:hover {
width: 20px;
height: 20px;
}
input#checkBox3:hover {
width: 36px;
height: 36px;
}
input#checkBox4:hover {
width: 20%;
height: 20%;
}
</style>
</head>
<body>
<h3> CSS Checkbox Size with the hover effect </h3>
<div>
<input type = "checkbox" id = "checkBox1" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox1" name = "JAVA" value = "JAVA"/> JAVA
<input type = "checkbox" id = "checkBox1" name = "CSS" value = "CSS" checked/> CSS
</div>
<br>
<div>
<input type = "checkbox" id = "checkBox2" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox2" name = "JAVA" value = "JAVA"/> JAVA
<input type = "checkbox" id = "checkBox2" name = "CSS" value = "CSS" checked/> CSS
</div>
<br>
<div>
<input type = "checkbox" id = "checkBox3" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox3" name = "JAVA" value = "JAVA" checked/> JAVA
<input type = "checkbox" id = "checkBox3" name = "CSS" value = "CSS" checked/> CSS
</div>
<br>
<div>
<input type = "checkbox" id = "checkBox4" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox4" name = "JAVA" value = "JAVA" checked/> JAVA
<input type = "checkbox" id = "checkBox4" name = "CSS" value = "CSS" checked/> CSS
</div>
</body>
</html>
Output
The output shows the CSS checkbox size.
Using the Transform Property
The transform attribute is crucial for adjusting the appearance of the checkbox. The scaling factor can be specified numerically based on the dimensions of the checkbox input element's height, width, margin, and padding.
Syntax
The transform property is employed to define the size of the checkbox in the given syntax.
Checkbox_element{
/* required value for transform property */
transform : scale(value);
}
Examples
The examples below demonstrate adjusting the size of checkboxes based on specific needs by utilizing the transform property within the webpage. The transform property along with its corresponding value is employed to modify the checkbox dimensions.
Example 1:
The illustration displays the dimensions, margins, and padding of the checkbox. The transform property can be utilized to adjust the size using scaling.
<!DOCTYPE html>
<html>
<head>
<title>
CSS checkbox size
</title>
<!-- Style to modify the size of the checkbox -->
<style>
input#checkBox2 {
transform: scale(2);
}
input#checkBox3 {
transform: scale(3);
margin-left: 30px;
margin-right: 30px;
}
input#checkBox4 {
transform: scale(4);
margin-left: 30px;
margin-right: 30px;
}
</style>
</head>
<body>
<h3> CSS Checkbox Size using tranform property </h3>
<div>
<input type = "checkbox" id = "checkBox1" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox1" name = "JAVASCRIPT" value = "JAVASCRIPT "/> JAVASCRIPT
<input type = "checkbox" id = "checkBox1" name = "CSS" value = "CSS" checked/> CSS
</div>
<br> <br>
<div>
<input type = "checkbox" id = "checkBox2" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox2" name = "JAVASCRIPT" value = "JAVASCRIPT"/> JAVASCRIPT
<input type = "checkbox" id = "checkBox2" name = "CSS" value = "CSS" checked/> CSS
</div>
<br> <br>
<div>
<input type = "checkbox" id = "checkBox3" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox3" name = "JAVASCRIPT" value = "JAVASCRIPT" checked/> JAVASCRIPT
<input type = "checkbox" id = "checkBox3" name = "CSS" value = "CSS" checked/> CSS
</div>
<br> <br>
<div>
<input type = "checkbox" id = "checkBox4" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox4" name = "JAVA" value = "JAVA" checked/> JAVA
<input type = "checkbox" id = "checkBox4" name = "CSS" value = "CSS" checked/> CSS
</div>
</body>
</html>
Output
The output shows the CSS checkbox size.
Example 2:
The demonstration illustrates the checkbox dimensions, margin, and padding following the hover interaction. Upon moving the mouse pointer, we have the option to apply the transform property using scale.
<!DOCTYPE html>
<html>
<head>
<title>
CSS checkbox size
</title>
<!-- Style to modify the size of the checkbox -->
<style>
input#checkBox1:hover {
transform: scale(1.5);
}
input#checkBox2:hover {
transform: scale(2);
}
input#checkBox3:hover {
transform: scale(3);
margin-left: 30px;
margin-right: 30px;
}
input#checkBox4:hover {
transform: scale(4);
margin-left: 30px;
margin-right: 30px;
}
</style>
</head>
<body>
<h3> CSS Checkbox Size using transformed hover property </h3>
<div>
<input type = "checkbox" id = "checkBox1" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox1" name = "JAVASCRIPT" value = "JAVASCRIPT "/> JAVASCRIPT
<input type = "checkbox" id = "checkBox1" name = "CSS" value = "CSS" checked/> CSS
</div>
<br> <br>
<div>
<input type = "checkbox" id = "checkBox2" name = "HTML" value = "HTML" checked/> HTML
<input type = "checkbox" id = "checkBox2" name = "JAVASCRIPT" value = "JAVASCRIPT"/> JAVASCRIPT
<input type = "checkbox" id = "checkBox2" name = "CSS" value = "CSS" checked/> CSS
</div>
<br> <br>
<div>
<input type = "checkbox" id = "checkBox3" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox3" name = "JAVASCRIPT" value = "JAVASCRIPT" checked/> JAVASCRIPT
<input type = "checkbox" id = "checkBox3" name = "CSS" value = "CSS" checked/> CSS
</div>
<br> <br>
<div>
<input type = "checkbox" id = "checkBox4" name = "HTML" value = "HTML"/> HTML
<input type = "checkbox" id = "checkBox4" name = "JAVA" value = "JAVA" checked/> JAVA
<input type = "checkbox" id = "checkBox4" name = "CSS" value = "CSS" checked/> CSS
</div>
</body>
</html>
Output
The output shows the CSS checkbox size.
Conclusion
The CSS checkbox size property is employed to adjust the dimensions of checkboxes displayed on a webpage. This feature enables the creation of visually appealing, sophisticated, and attention-grabbing checkboxes within an HTML form by utilizing various CSS attributes.