Todas las mentes viagra generico espana del mundo cialis generico espana recomiendan viagra contrareembolso prevenir problemas cialis contrareembolso

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.

Categorías: CSS, HTML
Si necesitas una url corta puede usar: codygo.es/605

5 comentarios

  1. diego dice:

    Hola!! :). Me gusta mucho los trabajos que haces y la verdad que me encanta el diseño y me apasiona mucho todos lo que se puede hacer. Sos una gran inspiracion!. Dale para adelante. Saludos

  2. daviz1982 dice:

    El problema de este método es que los radio o los checkbox quedan anulados por el display:none y no son accesibles con el teclado. Una solución para ello es cambiar display:none por opacity:0.

    Un saludo y muy buen blog 🙂

  3. mostel dice:

    Tengo el problema que no funciona en IE

Deja un comentario