comparte el articulo 

¿Cómo dar estilo a checkboxes y radiobuttons con CSS3?

Actualizado el 05/10/2013 < > 5 Cometarios

Resumen: En este artículo explicamos como personalizar los elementos checkbox y radiobuttons mediante el uso de imágenes y el pseudo selector ":checked".

Hasta hace poco era realmente difícil poder dar un estilo adecuado y funcional a los radiobuttons y checkboxes que componen nuestros formularios. La raíz de este problema, se deriva de que no existe un estándar de visualización para dichos elementos, por lo que con CSS no se logra obtener una solución adecuada y se tenía que optar por utilizar librerías de JavaScript para tratar de establecer el estilo.

En la actualidad, gracias a la incorporación de CSS3 podemos lograr dar estilos a dichos elementos y hacerlos funcionales en casi todos los navegadores, todo sin utilizar scripts o frameworks.

Estableciendo nuestro HTML

Para tratar de ahorrar tiempo y espacio, en esta ocasión el código mostrado será únicamente para modificar los elementos de tipo checkbox, pero vale aclarar que el proceso para darle estilo a los radiobuttons es exactamente el mismo.

Lo primero que debemos hacer es crear nuestras casillas de selección, y seguido de cada una de estas un elemento de tipo “label”.

<input type="checkbox" />
<label>Checkbox personalizado</label>

En caso de que no lo sepas, la etiqueta label que colocamos enseguida del checkbox es para mostrar la leyenda que nos hará identificar para qué es cada casilla. De esa manera podremos interactuar con el formulario teniendo un contexto de lo que seleccionamos.

Para dar el vínculo final, debemos utilizar el atributo “for” dentro de la etiqueta “label”, para de esa manera enlazar su valor con el del ID del checkbox.

<input type="checkbox" id="casilla1" name="casilla1" />
<label for="casilla1"><span>Checkbox personalizado 1</span></label>

Pasemos a dar estilo

Es tiempo de comenzar a darle estilo a nuestros elementos del formulario, y como primer paso debemos ocultar los checkboxes que aparecen por defecto, para así después poder establecer los propios.

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

Una vez ocultos, podemos darle un estilo al label y al span que se encuentra dentro de este. El motivo de utilizar este span, es simplemente para darnos más control sobre la posición exacta de la casilla. Se puede aplicar la imagen de fondo directamente sobre la etiqueta label, pero el posicionamiento puede llegar a ser difícil.

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

Lo primero que podrás notar en el código, es el uso de un selector algo particular, lo que hacemos con el es identificar y obtener todos los elementos que son de tipo “checkbox” a los cuales les sigue un elemento “label” con una etiqueta “span” en su interior.

También podrás notar la sentencia que establece el background para el elemento. Para este ejemplo, podemos hacer uso de una imagen que cuente con cuatro gráficas que representen al checkbox sin y con selección y al radio button en las mismas situaciones.

Después de esto, podemos agregar más estilos como márgenes o padding, todo dependiendo de nuestros gustos.

Toque final

Lo que resta por hacer, es proveer un estilo para cuando el elemento se encuentra en estado seleccionado, es aquí donde entra CSS3. Para lograr abarcar todos los elementos que se encuentran en estado de selección, haremos uso del pseudo selector “:checked”, el cual es exclusivo de CSS3 y aún no funciona en todos los navegadores.

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

Como podrás notar no cambie la imagen de fondo, simplemente moví la posición del background para que de esa manera se utilizará la misma imagen pero se mostrara otra parte. En tu caso puedes hacer uso de dos imágenes distintas si asi lo consideras necesario.

Con esto basta para lograr dar estilos a estos elementos sin la necesidad de utilizar JavaScript, como ya dijimos desgraciadamente no todos los navegadores soportan esta técnica, y por no todos nos estamos refiriendo obviamente a Internet Explorer, el cual incluso en su versión 9 aún no acepta el uso de el pseudo selector “:checked”.

Sin embargo, no nos debemos de preocupar por IE, ya que aunque no acepta estos estilos, se aplican los default y la respuesta es dócil.

Publicado el 04/12/2012, última actualización 05/10/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

5 Cometarios

  1. Óscar

    Gracias por la información, me ha servido para controlar los estilos del checkbox, pero… he comprobado que los estilos no se aplican en los navegadores de smartphones… Estoy peleando con este tema porqué los checkbox salen muy pequeños y dificultan la usabilidad.
    ¿Cónoces alguna solución? muchas gracias por adelantado.

    Martes, 12 de febrero 2013

  2. Daniel Ernesto Navarro Herrera

    Desgraciadamente funcionalidades como los selectores por atributo o :checked no funcionan en ciertas versions de iOS, puedes optar por aumentar el tamaño y utilizar imágenes para darle estilo a los checkboxes cuando el dispositivo del usuario tenga una pantalla con una resolución pequeña, esto se logra utilizando media queries de CSS.

    Martes, 12 de febrero 2013

  3. tyler

    y como hago si quiero que el label salga antes del checkbox (o sea, que este a la izquierda del checkbox)?

    Viernes, 15 de marzo 2013

  4. Daniel Ernesto Navarro Herrera

    Tyler simplemente pones la etiqueta label antes del checkbox en el código HTML.

    Viernes, 15 de marzo 2013

  5. Salomé A

    Muy bueno! una consulta… Lo hice y funcionó super bien con los estilos dentro de la cabecera del html, pero cuando lo adjunto en una hoja de estilos todo desaparece. ¿Sabes que puede estar pasando?

    Lunes, 22 de diciembre 2014

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras