Cómo personalizar las casillas de verificación y los botones de opciones con CSS personalizado

Utiliza CSS personalizado para configurar a tu gusto las casillas de verificación y los botones de opciones en los formularios HTML.

¿Aún no te has inscrito en Wufoo? ¡Empecemos!

Por: Chris Coyier

Gracias a la magia de CSS, podemos ofrecerles a nuestros usuarios muchas maneras de cambiar la apariencia de sus formularios de Wufoo. Lamentablemente, la apariencia visual de las casillas de verificación y de los botones de opciones dependen, en gran medida, de la plataforma en la que trabajes; a veces, resulta un poco difícil personalizarlos. A continuación, te mostramos opciones de Mac OS X Snow Leopard y Windows 7, junto a un grupo de casillas de verificación de diseño personalizado:

Botones de opción y casillas de verificación predeterminados

En la mayoría de las técnicas sobre cómo cambiar la apariencia de las casillas de verificación y de los campos de opciones, suele utilizarse JavaScript. Con estas técnicas, se insertan elementos similares, se ocultan las opciones originales y se adjuntan controladores de eventos con clic, que intercambian el aspecto así como el valor de la opción original. Todo esto es muy interesante, pero no funciona en los formularios de Wufoo debido a que no permitimos que ejecutes tu propio JavaScript en nuestros formularios (por el bien de todos).

Afortunadamente, existe una manera de personalizar por completo el aspecto de las casillas de verificación y de los botones de opciones a través de CSS. Esta técnica fue ideada por Ryan Seddon en su artículo “Botones de opciones y casillas de verificación personalizadas utilizando CSS”. La hemos modificado levemente y te guiaremos sobre cómo utilizarla en los formularios de Wufoo.

Personalización en acción

Para que tengas una idea de cómo lucirá cuando hayas terminado, verás un pequeño formulario de ejemplo para mostrar los estilos personalizados.

Comparación de casillas de verificación y botones de opciones personalizados

Ver formulario de ejemplo

1. Configurar CSS personalizado en tu formulario

Deberás crear un nuevo tema a través de nuestro Diseñador de temas y aplicar ese tema al formulario. Contamos con un tutorial sobre cómo empezar con CSS personalizado aquí.

2. Preparar las imágenes

Prepararemos tres imágenes diferentes. Una para cuando la casilla de verificación o el botón de selección no están seleccionados (off.png), una imagen de casilla de verificación para cuando hay una casilla de verificación seleccionada (check.png), y una imagen de botón de selección para cuando hay un botón de selección seleccionado (radio.png). Coloca estas imágenes en la misma carpeta en donde se encuentra tu archivo CSS personalizado.

3. El CSS

Aquí te mostramos el CSS, comentado en su totalidad para que la lectura te resulte placentera.


/*
    Ocultar los botones de opciones y casillas de verificación originales
    (pero aún accesibles)

    :not(#foo) > es un filtro de regla para bloquear navegadores
                 que no es compatible con dicho selector de
                 aplicar reglas que no deberían

*/
li:not(#foo) > fieldset > div > span > input[type='radio'],
li:not(#foo) > fieldset > div > span > input[type='checkbox'] {

    /* Ocultar la opción, pero dejarla para que se pueda seguir haciendo clic en ella */
    opacity: 0;

    float: left;
    width: 18px;
}

li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
    margin: 0;
    clear: none;

    /* Left padding makes room for image */
    padding: 5px 0 4px 24px;

    /* Hacer que el aspecto sea para hacer clic debido a que */
    cursor: pointer;

    background: url(off.png) left center no-repeat;
}

/*
    Cambiar de no marcado a gráfico marcado
*/
li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
    background-image: url(radio.png);
}
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
    background-image: url(check.png);
}

Coloca esto en tu archivo personalizado CSS, que es a la que apunta tu tema, que está aplicado al formulario y, luego, comenzará a funcionar.