Consejo rápido: Checkboxes y Radio buttons fáciles con CSS3

() translation by (you can also view the original English article)

¿Te has preguntado alguna vez cómo aplicar estilo a los botones de radio y a las casillas de verificación, sin emplear JavaScript? ¡Gracias a CSS3 puedes!

Paso 1: Entender el Proceso

Lectura Recomendada: Los 30 Selectores CSS Que Debes Memorizar

Para aquellos de vosotros que confían en su habilidad con CSS y solo quieren un empujón en la dirección correcta, aquí tenéis la línea de CSS más importante de todo el tutorial:

1	input[type="checkbox"]:checked + label {
2
3	}

Ahora, para aquellos de vosotros que necesitéis más instrucción, no os sintáis abrumados, ¡seguid leyendo!

Bien, volvamos de nuevo al tema que nos ocupa. ¿Qué vamos a hacer exactamente? Bueno, gracias al ingenioso pseudo selector CSS3 :checked, somos capaces de seleccionar un elemento basándonos en la condición de si éste está (o no) seleccionado. Después podremos utilizar el selector de hermano adyacente «+» de CSS2.1 para dirigirnos directamente al elemento de destino situado tras la casilla de verificación o el botón de radio, que en nuestro caso es la etiqueta.

Paso 2: Ajustar nuestro HTML

Ahora, empezaremos creando los archivos HTML y CSS (o como prefieras gestionar tus estilos) y nos pondremos manos a la obra. Asumo que sabes cómo hacerlo, así que no vamos a entrar en ello.

Con el objetivo de guiarte en el camino a seguir, te mostraré esta técnica aplicándola solo a una casilla de verificación, no obstante el proceso para los botones de radio es idéntico y está incluido en la fuente.

Bien, entonces empecemos verdaderamente, ¿vamos? Empezamos creando nuestro campo de entrada para la casilla de verificación, seguido de una etiqueta.

1	<input type="checkbox" />
2	<label>Styled Check Box</label>

Ahora, por si no conoces mucho sobre el elemento <label>, tienes que vincular el campo de entrada con su etiqueta para que sea posible interactuar con el campo de entrada mediante la etiqueta. Esto se consigue usando for = "" junto con el ID del campo entrada.

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1">Check Box 1</label>

También añadiré un elemento <span> dentro de la etiqueta, es más una preferencia personal que otra cosa, pero lo verás todo con más claridad en el paso 3.

Paso 3: Aquello Para lo Que Estamos Aquí: CSS

Aquí es donde empieza la diversión. Lo primero que vamos a hacer, que constituye la base para todo este tutorial, es ocultar la actual casilla de verificación.

1	input[type="checkbox"] {
2	display:none;
3	}

Ahora que eso está hecho, podemos aplicar estilo a la etiqueta, y más concretamente al <span> dentro de la etiqueta. Hacerlo así para darme más control sobre la posición exacta de la casilla de verificación. Sin ella sería probablemente usando una imagen de fondo en la etiqueta directamente, y colocándolo puede volverse difícil.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

Bueno, déjame explicarlo rápidamente. En primer lugar, observa el fondo. Tengo una hoja de pequeños sprites para esto, todo lo que tengo que hacer es establecer la posición del fondo en este span. El propio span tiene el mismo grosor y altura que cada "sprite" de la hoja, facilitando la definición de cada estado.

Nuestra hoja de sprite

Aquí está el resto del CSS, específicos para mi estilo. Esto es puramente por razones estéticas y conforme a mi gusto o diseño.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

Paso 4: Hacerlo Funcionar

No queda mucho por hacer, así que vamos a acabarlo. Lo último que necesitas es proporcionar un estado al elemento para cuando esté seleccionado el campo de entrada, y opcionalmente también para cuando el cursor se sitúe sobre él. Esto es bastante sencillo, ¡échale un vistazo!

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Observa que al haber usado una hoja de sprites, todo lo que tengo que hacer es ir cambiando la posición del fondo. Advierte también, que todo lo que tuve que hacer para aplicar estilo al elemento span de la etiqueta cuando "activas" un botón de casilla de verificación o de radio, fue utilizar el pseudo selector CSS3 :checked.

Breve Aviso Sobre la Compatibilidad con Navegadores

Los pseudo selectores disfrutan de un fantástico soporte en todos los navegadores, pero IE nos estropea la fiesta. Puedes olvidarte perfectamente de :checked en IE9 y versiones inferiores, pero la alternativa está bastante bien.

Esto sucede con IE9 en Windows 7, aunque no lo creas...

Los navegadores móviles son un asunto aparte - el soporte de :checked no está claro. El navegador Safari para móviles anteriores a iOS 6 no lo admiten, por ejemplo.

Conclusión

Bueno, parece que hemos terminado, ¿no? Comprobémoslo una segunda vez. Primero el HTML:

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1"><span></span>Check Box 1</label>

¿Se parece al tuyo? ¡No olvides de añadir ese <span>! Cuando experimentes con esto por tu cuenta, te sugiero enormemente que busques nuevas o diferentes formas de hacer esta parte. Me encantaría ver lo que se te ha ocurrido para hacerlo más eficiente. Ahora a por el CSS:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

¿Está todo presente? Perfecto. Ten en cuenta que gran parte de este estilo está pensado específicamente para aplicar estilo para los archivos de muestra que creé antes. Os animo a crear y experimentar con la disposición y la presentación.

En conclusión, lo más importante que podrías extraer de todo esto es la primera línea de CSS que escribí en la parte superior:

1	input[type="checkbox"]:checked + label {
2
3	}

Con eso puedes crear una manera totalmente diferente de hacer las cosas. Las posibilidades con :checked van más allá de las casillas de verificación y los botones de radio que puedas usar en formularios, pero ahora te dejo para que experimentar por tu cuenta. Espero que te haya gustado este breve artículo y que recojas lo que hayas visto aquí, ¡e incluso ampliarlo o mejorarlo!