Casillas de verificación
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;}