HTML / CSS: Cómo cambiar el tamaño de las casillas de verificación (sin superposición)

Quiero cambiar el tamaño de una checkbox, por ejemplo, al 200% de tamaño.

Intenté las soluciones de esta pregunta :

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

pero eso solo hace que la checkbox sea más grande y no cambia el tamaño del tamaño del diseño, lo que resulta en una superposición de todo lo que lo rodea; también el “relleno” no tuvo ningún efecto sobre Chrome o Firefox para mí (y de todos modos sería una fea solución mezclar tamaños relativos con métricas absolutas de píxeles).

¿Hay alguna solución que cambie el tamaño de todo el checkbox, eso significa no solo la parte visible, sino también el tamaño del diseño, para que no se solape como una checkbox normal?

Editar: También intenté esto:

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

pero eso arruina todo el diseño en Chrome (las casillas de verificación están en una tabla simple y Chrome las aleja de sus celdas de tabla) y no tiene ningún efecto en Firefox

Espero que esta FIDDLE trabaje para ti

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

HTML

   Option A    Option B    Option C  

CSS

 input[type=checkbox] { /* All browsers except webkit*/ transform: scale(2); /* Webkit browsers*/ -webkit-transform: scale(2); } .paddingClass{ margin:20px; padding:5px; }