Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set checkbox size in HTML/CSS?
HTML, or Hypertext Markup Language, is used to create web pages and define their structure and content and CSS has the ability to style them. HTML has a verity of elements to create the web page including web form.
Checkboxes are an important part of web forms and user interfaces. Checkboxes are used when more than one option is required to be selected. By default, checkboxes in HTML are small, which is sometimes not suitable for design requirements. However, the size of the checkbox can be adjusted as per the requirement using CSS.
What is Checkbox?
In HTML checkbox is a form element that allows a user to select one or more options from a list, it is represented by a small box. Checkboxes can be checked or unchecked, the checked status is represented by a tick or check mark inside the box. Checkboxes are also created using HTML <input> tag and the type attribute is set to checkbox. For example −
<input type="checkbox" id="checkbox" name="checkbox" value="1"> <label for="checkbox-1">Checkbox 1</label>
In the above code, we have created a checkbox with an ID, Name, and attributes. The "for" attribute on the label element corresponds to the ID of the checkbox.
Example 1
Below is an example for creating the checkbox using HTML.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h2>Create a Checkbox Using HTML</h2>
<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
CSS is a powerful tool to style the HTML elements. It allows us to change the visual size of the checkbox. We can use the "width" and "height" properties to set the size of the checkboxes. By using the below CSS code, we can set the width and height of the checkbox −
input[type=checkbox] {
width: 30px;
height: 30px;
}
The above code will set the height and width of the checkbox to 30 pixels.
Example 2
Below is an example to set the height and width of the checkbox to 30 pixels.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
input[type=checkbox] {
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<h2>Create a Checkbox Using HTML</h2>
<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>
Styling the Checkbox
In addition to setting the size of checkboxes, their appearance can also be styled in CSS. CSS allows developers to change the visual size of the checkbox as well as the hitbox that detects the click event. For Example, we can use the below CSS code to styling the checkbox.
input[type=checkbox] {
-webkit-appearance: none;
width: 40px;
height: 40px;
background-color: red;
border-radius: 5px;
border: 3px solid lightgray;
margin-right: 10px;
}
input[type=checkbox]:checked {
background-color: lightgreen;
}
In the above CSS code −
Display − inline-block; sets the display property to inline-block.
Width and height properties set the size of the checkbox.
Background-color property sets the background color of the checkbox.
Border-radius property rounds the edges of the checkbox.
Border property adds a border and border color to the checkbox.
Margin-right property sets the distance between the checkbox and the label.
:Checked pseudo-class targets the checkbox after checking it.
Background-color property changes the background color of the checkbox when the user checks it.
Example 3
Here is a full code example of styling the checkbox.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
input[type=checkbox] {
-webkit-appearance: none;
display: inline-block;
width: 40px;
height: 40px;
background-color: red;
border-radius: 5px;
border: 3px solid lightgray;
margin-right: 10px;
}
input[type=checkbox]:checked {
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>Create a Checkbox Using HTML</h2>
<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>
Conclusion
Here, we discussed how to set checkbox size in HTML and CSS. While the HTML method only changes the visual size of the checkbox, the CSS method allows developers to change the hitbox as well. By using CSS, we can also style the checkbox to make it more visually appealing and user-friendly.
3K+ Views
