« anterior | siguiente »

Home > 2006 > Junio > Jueves, 15 de Junio 2006 > Crear nuestros propios checkboxes y radio buttons mediante CSS
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Jue15Jun2006

Crear nuestros propios checkboxes y radio buttons mediante CSS

12:15 H (CET)| Temas: CSS · How to

A veces dependemos del navegador en aspectos de diseño, un caso bastante común es con los checkboxes y radio buttons, no son como nosotros queremos y difieren según el navegador que usemos.

fuglychecks.pngEsto se puede solucionar mediante CSS, para ello deberemos crearnos una imagen que contenga todos los estados del botón (seleccionado, no seleccionado, con foco y sin foco). Como se puede apreciar, la imagen contiene todos los posibles estados uno debajo del otro, ya que mediante estilos, usaremos una porción de la imagen para mostrar el estado correspondiente.

Para poder realizar este efecto es necesario usar la etiqueta label, la cual hará referenia al checkbox o al radio button, los cuales son necesarios ocultar para poder sustituirlos por la imagen (que estará ligada al elemento label).

Tenemos estos elementos HTML:

<input type="checkbox" id="opc1"/><label for="opc1">Opcion 1</label>

Los estilos iniciales para el input y para el label son los siguientes:

input[type="checkbox"] {
  visibility: hidden;
  width: 0px;
  height: 0px;
  padding: 0px;
  margin: 0px;
}


label {

	padding-left: 20px;

	height: 16px;

}

Y por último, los estilos para los distintos estados del input son los siguientes:


input[type="checkbox"] + label{

	background: url("imagen.png") 0 0 no-repeat;

}



input[type="checkbox"]:focus + label{

	background-position: 0 -16px;

}



input[type="checkbox"]:checked + label{

	background-position: 0 -32px;

}



input[type="checkbox"]:checked:focus + label{

	background-position: 0 -48px;

}

Styling Checkbox and Radio Graphics With Only CSS


Vía / Digg

Relacionados

Feedback (5) » Formulario

1. total13 ~ Jueves, 15 Jun 2006 | 13:02H:

Hombre, está muy bien como curiosidad, pero mientras no se pueda implementar en Internet Explorer me temo que se quedará en eso, en curiosidad.

2. Luis ~ Jueves, 15 Jun 2006 | 14:40H:

La pena es que tengamos que depender de IE, esperemos que el IE7 si lo implemente. Pero como diría Gabriel: "I don't care about your browser"

3. Alex Sancho ~ Jueves, 15 Jun 2006 | 17:51H:

Sisi, muy bobita la teoria, pero dile tu al editor de un sitio comercial que su sitio no se va a ver bien en IE porque esta bien construido :)

Aps, la tecnica curiosa, pero los pseudoselectores nunca me han terminado de convencer, prefiero usar javascript para trabajar con este tipo de cosas.

Saludos

4. Luis ~ Viernes, 16 Jun 2006 | 00:37H:

Qué me vas a contar a mí, que en mi caso el cliente hace poco nos pidió que funcionara para Netscape 4.7, yo hablaba con ironía.

¿Qué tienen de malo los pseudoclases?, cuando el navegador los implementa, claro. El hover es algo que todo el mundo usa.

Saludos

5. Alex Sancho ~ Viernes, 16 Jun 2006 | 16:48H:

De malo nada, es evidente que existen y cumplen su funcion, aunque las hojas de estilo sean un lenguaje de presentacion y las pseudoclases intentan imitar comportamientos, funcion para la cual existe el javascript por poner un ejemplo.

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)