Increasing the size of checkbox in HTML

Question

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

Answer 1

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>

Answer 2

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.

Answer 3

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