Muchas veces nos encontramos con que podemos aplicar estilos a campos de texto y cajas de texto, también a botones pero no a checkbox y radio buttons. Pues bien hay una manera (aunque tiene sus inconvenientes).

Para ello debemos montar una estructura HTML similar a ésta (puede sufrir variaciones en función del diseño que queráis desarrollar):

     <form id="f1" name="f1">
          <input type="checkbox" id="b1" value="1" /><label for="b1"><div class="outside box"><div class="inside box"></div></div>Opción</label><br />
          <input type="checkbox" id="b2" value="2" /><label for="b2"><div class="outside box"><div class="inside box"></div></div>Opción</label><br />
          <input type="checkbox" id="b3" value="3" /><label for="b3"><div class="outside box"><div class="inside box"></div></div>Opción</label><br />
     </form>

Deberemos repetir el input tanta veces cómo opciones. Repito que es una estructura base, sólo para que entendáis cómo funciona.

A continuación aplicaremos los estilos

     input[type=checkbox]{
          display:none;
     }
     .outside{
          position: relative;
          width:15px;
          height: 15px;
          border: 1px solid #000000;
          display:inline-block;
     }
     .inside{
          positin: absolute;
          top: 50%;
          left: 50%;
          margin: -5px 0 0 -5px;
          width: 10px;
          height: 10px;
     }
     input[type=checkbox]:checked + label .inside{
          background: #000000;
     }

Y listos! Si quisiésemos hacer lo mismo para los radio buttons, deberíamos cambiar el HTMl, de checkbox a radio buttons y en el CSS también.