CSS Checkboxes estilo iPhone

Me encontré este artículo http://www.thecssninja.com/css/custom-inputs-using-css,  que muestra como dar estilo a radio buttons y checkboxes usando CSS sin utilizar javascript. Como casi siempre, IE8 e inferiores se quedan por fuera debido a la falta de soporte de la pseudoclase :checked. Sin embargo, es una técnica muy útil para embellecer nuestros formularios, yo ya la estoy usando.

Para todos los que les gustan las interfaces del iPhone, usando esa técnica, podemos convertir un checkbox normal en un switch estilo muy parecido al que usa iOS.

En el artículo de cssninja explican las bases para el código que se muestra a continuación.

HTML

El código html se mantiene igual al de un checkbox normal:

<p>
 <input type="checkbox" value="active" id="toggle" name="toggle" />
 <label for="toggle">toggle</label>
</p>

CSS

Al checkbox le damos las dimensiones apropiadas, pero lo ocultamos usando opacity:

p:not(#foo) > input[type=checkbox] {
 opacity: 0;
 margin: 0;
 padding: 0;
 position: absolute;
 height: 24px;
 width: 84px;
 cursor: pointer;
}

La imagen de fondo la ponemos en el label, donde además ocultamos el texto. No hay problema en usar CSS3 para redondear los bordes.

p:not(#foo) > input[type=checkbox] + label {
 background: url(iphone_switch.png) -48px 0 no-repeat;
 padding: 0 0 0 84px;
 display: block;
 height: 24px;
 line-height: 24px;
 width: 0;
 text-indent: -9999px;
 border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
}
 
p:not(#foo) > input[type=checkbox]:checked + label {
 background-position: 0 0;
}

CSS Transitions

Usando CSS Transitions podemos animar nuestro checkbox para obtener el efecto completo. Desafortunadamente solo funciona en Chrome, Safari y Firefox 4beta. Aunque Opera soporta Transitions en sus últimas versiones, en este caso no funciona la animación.

p:not(#foo) > input[type=checkbox] + label {
 -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;
}

Demo

Bueno y para la muestra un botón! o dos, un checkbox funcionando y el otro disabled.

toggle

not allowed