Casillas de verificación

facebook-svg gplus-svg twitter-svg

En el CSS3 podemos dar formato a las casillas de verificación ( checkbox ) y a los botones de radio, o casi. De hecho podemos construir una nueva casilla de verificación, o un nuevo botón de radio  y esconder a los que vienen de fábrica. Para esto utilizamos el pseudoelemento :before.

Casillas de verificación

Queremos dar formato a la etiqueta <label> vinculada a la casilla de verificación.

input[ type=checkbox ] + label

Este selector apunta las etiquetas <label>  situadas inmediatamente después ( + ) de un input de tipo checkbox. Delante ( before ) de estas etiquetas construimos un pseudoelemento: la nueva casilla de verificación.

   
  input[ type=checkbox ] + label:before {
	content: "";
	display:inline-block;  
	width:20px; 
	height:20px; 
	border:1px solid #ddd;
	text-align:center;  
	line-height:14px;
	margin:0 3px 0 0;
	padding:0; 
	position:absolute;  
	left:8px;
}

Cuando al hacer clic sobre la etiqueta <label> marcamos la casilla de verificación ( la original, la que tenemos oculta ) el contenido del pseudoelemento :before cambia a content: "\02713"; ( el símbolo "visto": ✓ ).

input[ type=checkbox ]:checked + label:before{ 
  content: "\02713"; 
  color:red;
}

Para saber más acerca del uso de símbolos en el CSS lea este articulo: Símbolos ASCII y Unicode

Botones de radio

En el caso de los botones de radio queremos que sean redondos. Para esto, además del CSS ya utilizado para los checkbox,  utilizamos border-radius:100px;  No importa que un radio de 100px sea demasiado grande. El navegador calcula el radio idóneo, y transforma el pseudoelemento en un circulo.

input[ type=radio ] + label:before{ border-radius:100px;}

Cuando al hacer clic sobre la etiqueta <label> marcamos el botón de radio,  el background del pseudoelemento :before cambia a rojo, pero con un toque especial. Si background-clip: content-box; el fondo ( background ) aparece solo dentro del contenido de la caja.

input[ type=radio ]:checked + label:before{
       padding:4px;
       background-clip : content-box;
       background-color:red;
}

Lea más acerca de background-clip


form *, form *:before, form *:after { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	margin:0;
	padding:0; 
	font-size:16px; 
	font-family:Georgia, "Times New Roman", Times, serif
	}
form#demo{ 
	max-width:250px; 
	margin:0 auto; 
	padding:20px 20px 0 20px; 
	border:1px solid #d9d9d9;
	}
fieldset{ padding:20px 20px 15px 20px; border:1px solid #d9d9d9; margin-bottom:20px;}
form p{
	position:relative; 
	padding:3px 0 3px 35px; 
	}
input[name="chec[]"],input[name="rad"]  {
	position: absolute;
	left: -1000em;
	}

input[ type=checkbox ] + label{
	height:30px;
	 
	}
input[ type=checkbox ] + label:before, 
input[ type=radio ] + label:before
{ 
	content: "";
	display:inline-block;  
	width:20px; 
	height:20px; 
	border:1px solid #ddd;
	text-align:center;  
	line-height:14px;
	margin:0 3px 0 0;
	padding:0; 
	position:absolute;  
	left:8px;
	}
input[ type=radio ] + label:before{ border-radius:100px;}
	
input[ type=checkbox ]:checked + label:before{ 
	content: "\02713"; 
	font-size:30px;
	color:red;
	}
input[ type=radio ]:checked + label:before{ 
	padding:4px;
	background-clip : content-box;
	background-color:red;
	} 	
	
input[ type=checkbox ]:focus + label:before,
input[ type=radio ]:focus + label:before
{box-shadow : 0px 0px 3px 1px #ccc;}