title: HTML/CSS: How to resize checkboxes (without overlapping)
body: <p>I want to resize a checkbox, for example to 200% size.</p>
  
  <p>I tried the solutions from <a href="https://stackoverflow.com/questions/306924/checkbox-size/24688640#24688640">this question</a>:</p>
  
  <pre><code>input.big[type=checkbox]
  {
      transform: scale(2);
      padding: 10px;
  }
  </code></pre>
  
  <p>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).</p>
  
  <p>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?</p>
  
  <p>Edit: I also tried this:</p>
  
  <pre><code>input.big[type=checkbox]
  {
      width:200%;
      height:200%;
  }
  </code></pre>
  
  <p>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</p>