Set Checkbox Size
In this article, we will see about how to set the size of input “checkbox” in CSS. We can create checkbox using HTML <input> tag. The chekcbox is used to take the input from user. There are two ways to set the checkbox size, Let’s see with example:
Method 1: Using height and width property
Syntax:
.{input checkbox classname}
{
height : (your desired size in px)
width : (your desired size in px)
}Example:
<html>
<head>
<title>checkbox size</title>
<style type="text/css">
.check{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<form>
<input class="check" type="checkbox">
</form>
</body>
</html>Output:
Steps :
- In the above code, we have created a <form> tag and inside it we have <input> tag with classname “check”.
- To create checkbox, we need to set the input “type” attribute to “checkbox”.
- In CSS, we select input classname “check” using class selector and then set “width” property to 20px and “height” property to 20px.
- See the above output, the checkbox size is changed.
Method 1: Using height and width property
Syntax:
.{input checkbox classname}
{
transform: size(your desired size);
}Example:
<html>
<head>
<title>checkbox size</title>
<style type="text/css">
.check{
transform: scale(10);
}
body{
text-align: center;
margin-top: 200px;
}
</style>
</head>
<body>
<form>
<input class="check" type="checkbox" >
</form>
</body>
</html>Output:
Steps :
- In the above code, we have created “checkbox” using <input> tag.
- In CSS, we select input classname “check” using class selector and then set “tranform” property to “size(10)” for changing checkbox size.
- Then select body tag using CSS element selector. Set “text-align” property to “center” for centering the content and set “margin-top” property to “200px”.
- See the above output image, the size of checkbox is changed successfully.
