Increasing the size of checkbox in HTML

Question

Is there any way to increase the size of checkbox in HTML?

Is there any way to increase the size of checkbox in CSS or javascript? — sumit pandey, Nov 23 '11 at 12:36
A lot of really helpful ideas posted here as well: http://stackoverflow.com/q/306924/469643 — veeTrain, Apr 14 '14 at 13:56

score 37 · Answer 1 · edited Feb 05 '16 at 16:41

37

One way I changed the checkbox size is by scaling it with CSS:

input[type=checkbox] {
    transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    padding: 10px;
}

edited Feb 05 '16 at 16:41

Martin Tournoij

26,737
24
105
146

answered Oct 11 '13 at 06:14

Shoaib Chikate

8,665
12
47
70

Simple and useful in many cases where all you're trying to do is match the font size. – underdog Nov 17 '20 at 06:21

alex · Accepted Answer · 2014-11-15T00:24:32.713

15

Not in an easy cross browser way.

You would get the most flexibility replacing it with a control that utilises JavaScript and CSS. Use a standard checkbox as a fallback.

These days, with the :checked pseudo selector, you can make a label element to do it as well.

edited Nov 15 '14 at 00:24

answered Nov 23 '11 at 12:32

alex

479,566
201
878
984

1

Is there any way to increase the size of checkbox in CSS or javascript? – sumit pandey Nov 23 '11 at 12:37
4

Don't use JS. You could consider [this link](http://www.jotform.org/html-elements/how-to-change-checkbox-size-css/). It' a very interesting workaround, as suggested by @Sjoerd – arod Dec 28 '13 at 17:04

score 12 · Answer 3 · answered Mar 19 '14 at 13:50

12

This works for me.

<input type="checkbox" id="check" onclick="checked()" style="width:20px;height:20px;"/>

answered Mar 19 '14 at 13:50

Junchao Xu

139
2
5

score 6 · Answer 4 · answered Aug 11 '17 at 06:09

A trick for increasing size of HTML checkbox is increase zoom property of input. It is cross browser compatible and also it will adjust the size according to resolution of device.

.daysCheckbox1{
zoom:1;

}
.daysCheckbox2{
zoom:1.5;

}
.daysCheckbox3{
zoom:2;

}
.daysCheckbox4{
zoom:2.5;

}

<label> Checkbox 1<input type="checkbox" class="daysCheckbox1"   name="Monday"></label><Br>
<label> Checkbox 2<input type="checkbox" class="daysCheckbox2"   name="Monday"></label><Br>
<label> Checkbox 3<input type="checkbox" class="daysCheckbox3"   name="Monday"></label><Br>
<label> Checkbox 4<input type="checkbox" class="daysCheckbox4"   name="Monday"></label><Br>

[`zoom` is a non-standard CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom) and doesn't work in Firefox. — Abdull, Jun 16 '20 at 14:43

score 6 · Answer 5 · answered Nov 23 '11 at 12:33

No. Most browsers ignore the width or height CSS styling of a checkbox. There are two ways around that:

Use a label tag so that clicking some other element also triggers the textbox.
Make your own checkbox using Javascript, by switching an image and filling a hidden input box.

score 4 · Answer 6 · answered Nov 29 '11 at 08:20

I searched a lot and finally i created a custom checkbox.Code is

  <script type="text/javascript" src="jquery.js"></script>
       <script type="text/javascript">
     $(document).ready(function(){
    $(".CheckBoxClass").change(function(){
    if($(this).is(":checked")){
        $(this).next("label").addClass("LabelSelected");
    }else{
        $(this).next("label").removeClass("LabelSelected");
    }
});
          });
       </script>

Style is

     .CheckBoxLabelClass{
    background: url("uncheck222.png") no-repeat;
    padding-left: 5px;
    padding-top: 3px;
    padding-right: 10px;
    margin: 5px;
    height: 60px;   
    width: 60px;
    display: block;
}
.CheckBoxLabelClass:hover{
    text-decoration: underline;
}
.LabelSelected{
     background: url("check1111.png") no-repeat; 
    padding-left: 5px;
    padding-top: 3px;
    padding-right: 10px;
    margin: 5px;
    height: 60px;   
    width: 60px;
    display: block;

}

checkbox code is:

    <input id="CheckBox1" type="checkbox" class="CheckBoxClass"/>
            <label id="Label1" for="CheckBox1" class="CheckBoxLabelClass"></label>

score 0 · Answer 7 · answered Jun 23 '20 at 05:53

One way to do this is to put the checkbox item inside the div element, change the div element size using px. Now set the height and width of the checkbox item to 100% of the div element.

<style>
    *Reset*
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
   *Changing the height of the body for better view*
    body {
        height: 1000px;
    }
    *Increasing the height and width of the div element*
    div {
        width: 100px;
        height: 100px;
        background-color: brown;
        margin: auto;
        margin-top: 100px;
    }
  *setting the height and width of the input to 100% of the div element*
    input {
        height: 100%;
        width: 100%;
    }
</style>

<body>
   <div>
      <input type="checkbox" name="" id="">
   </div>
</body>

score 0 · Answer 8 · answered Aug 10 '21 at 06:22

try this one:

input[type="checkbox"]{
  cursor: pointer;
  width: 50px; /*Desired width*/
  height: 50px; /*Desired height*/
  -webkit-appearance: none;
  appearance: none;
}

OR

.CbxSizer {
  zoom: 8;
  transform: scale(4);
  -ms-transform: scale(4);
  -webkit-transform: scale(4);
  -o-transform: scale(4);
  -moz-transform: scale(4);
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

<div class="CbxSizer">
  <input type="checkbox" name="hello" value="1">
</div>

OR

    input[type='checkbox'] {
        -webkit-appearance:none;
        width:40px;
        height:40px;
        background:white;
        border-radius:6px;
        border:3px solid #445;
    }
    input[type='checkbox']:checked {
        background: #abd;
    }

<input type="checkbox" />

score -5 · Answer 9 · answered Jul 04 '13 at 11:36

-5

Set the font-size of the checkbox to something like 5em. Worked for me.

answered Jul 04 '13 at 11:36

Andrew

1

score -5 · Answer 10 · answered Nov 30 '11 at 14:07

-5

U can create a custom checkbox with 2 images switching with each other on tou

answered Nov 30 '11 at 14:07

nadroid

19
4

2

What exactly do you mean, how would you do it? Show some code. The answer in this form doesn't contribute enough. Mention me in a comment after edit so I can remove my downvote. – markus Nov 30 '11 at 16:44

Increasing the size of checkbox in HTML

10 Answers10

Linked

Related