HTML/CSS: How to resize checkboxes (without overlapping)

Question

I want to resize a checkbox, for example to 200% size.

I tried the solutions from this question:

input.big[type=checkbox]
{
    transform: scale(2);
    padding: 10px;
}

but that just makes the checkbox bigger and does not resize the layout-size, resulting in an overlap of everything around it; also the "padding" had no effect on either Chrome or Firefox for me (and it would be an ugly workaround anyway to mix relative sizes with absolute pixel metrics).

Is there a solution that resizes everything of the checkbox, that means not just the visible part, but also the layout-size, so that it does not overlap just like a normal checkbox?

Edit: I also tried this:

input.big[type=checkbox]
{
    width:200%;
    height:200%;
}

but that messes up the whole layout in Chrome (the checkboxes are in a simple table and Chrome puts them far away from their table cells) and it has no effect at all in Firefox

Answer 1

hope this FIDDLE work for you

http://jsfiddle.net/rpku6d89/19/

HTML

<input  type="checkbox" name="optiona" id="opta" class="paddingClass" checked />
<span class="checkboxtext">
  Option A
</span>
<input type="checkbox" name="optionb" id="optb" class="paddingClass" />
<span class="checkboxtext">
  Option B
</span>
<input type="checkbox" name="optionc" id="optc" class="paddingClass"/>
<span class="checkboxtext">
  Option C
</span>

CSS

input[type=checkbox] {
      /* All browsers except webkit*/
      transform: scale(2);

      /* Webkit browsers*/
      -webkit-transform: scale(2);
    }

    .paddingClass{

        margin:20px;
        padding:5px;
    }