Top 2 easy way to set checkbox size in CSS

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:

checkbox size css

Steps :

  1. In the above code, we have created a <form> tag and inside it we have <input> tag with classname “check”.
  2. To create checkbox, we need to set the input “type” attribute to “checkbox”.
  3. In CSS, we select input classname “check” using class selector and then set “width” property to 20px and “height” property to 20px.
  4. 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:

checkbox size css

Steps :

  1. In the above code, we have created “checkbox” using <input> tag.
  2. In CSS, we select input classname “check” using class selector and then set “tranform” property to “size(10)” for changing checkbox size.
  3. 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”.
  4. See the above output image, the size of checkbox is changed successfully.
READ ALSO  How to Filter Data Between Two Dates and times in SQL?

 

Leave a Reply