Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set Checkbox Size in HTML & CSS
To set checkbox size in HTML/CSS, we will be using simple CSS properties. We will be understanding three different approaches to set checkbox size in HTML/CSS.
In this article, we are having two checkboxes each having a label. Our task is to set checkbox size in HTML/CSS.
Approaches to Set Checkbox Size in HTML/CSS
Here is a list of approaches to set checkbox size in HTML/CSS which we will be discussing in this article with stepwise explaination and complete example codes.
- Setting Checkbox Size using height and width Properties
- Setting Checkbox Size using transform Property
- Setting Checkbox Size using zoom Property
Setting Checkbox Size using height and width Properties
To set checkbox size in HTML/CSS, we will be using simple CSS height and width properties to set the dimension of checkbox.
- We have created two checkboxes with input tag using type attribute as checkbox and used two labels to name the checkboxes.
- Then, we have used "input[type=checkbox]" which selects the checkboxes in our HTML document.
- We have used height and width properties to set checkbox dimension with height and width as 30px.
Example
Here is a complete example code implementing above mentioned steps to set checkbox size in HTML/CSS using CSS height and width property.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=checkbox] {
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<h3>
To Set Checkbox Size in HTML/CSS
</h3>
<p>
In this example we have used CSS <strong>
height</strong> and <strong>width</strong>
property to set checkbox size in HTML/CSS.
</p>
<input type="checkbox" id="checkbox-1"
name="checkbox-1" value="1">
<label for="checkbox-1">Option 1</label>
<input type="checkbox" id="checkbox-2"
name="checkbox-2" value="2">
<label for="checkbox-2">Option 2</label>
</body>
</html>
Setting Checkbox Size using transform Property
In this approach to set checkbox size in HTML/CSS, we will be using scale function of transform property. CSS scale() function resizes an element on two-dimensional plane.
- First two steps are same as approach one to create and select the checkboxes.
- Then, we have used "transform: scale(3);" property which scales checkbox size by three times.
Example
Here is a complete example code implementing above mentioned steps to set checkbox size in HTML/CSS using CSS transform property.
<!DOCTYPE html>
<html>
<head>
<title>
Set the size of checkbox
</title>
<style>
input[type="checkbox"] {
transform: scale(3);
margin: 15px;
}
</style>
</head>
<body>
<h3>
To Set Checkbox Size in HTML/CSS
</h3>
<p>
In this example we have used CSS <strong>
transform</strong> property to set checkbox
size in HTML/CSS.
</p>
<input type="checkbox" id="option1">
<label for="option1">Option 1</label>
<br><br>
<input type="checkbox" id="option2">
<label for="option2">Option 2</label>
</body>
</html>
Setting Checkbox Size using zoom Property
In this approach we have used CSS zoom property to set checkbox size in HTML/CSS. CSS zoom property is similar to scale function of transform property. It is non standard and scale() function can be used in place of zoom property.
- First two steps are same as approach one to create and select the checkboxes.
- Then, we have used "zoom: 3;" property which scales checkbox size by three times.
Example
Here is a complete example code implementing above mentioned steps to set checkbox size in HTML/CSS using CSS zoom property.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input[type="checkbox"] {
zoom: 3;
}
</style>
</head>
<body>
<h3>
To Set Checkbox Size in HTML/CSS
</h3>
<p>
In this example we have used <strong>zoom
</strong> property to set checkbox size
in HTML/CSS.
</p>
<input type="checkbox" id="option1">
<label for="option1">Option 1</label>
<br><br>
<input type="checkbox" id="option2">
<label for="option2">Option 2</label>
</body>
</html>
Conclusion
To set checkbox size in HTML/CSS is a simple process. In this article we have discussed three different approaches to set checkbox size in HTML/CSS which are: by using CSS height and width, by using transform property and by using zoom property.
7K+ Views
