Checkboxes con estilo

17/mar/2014 2

Los formularios son una de las razones de porque el mundo corporativo entró a Internet: captura de datos de usuarios. Es la forma más fácil y rápida de obtener ese ansiado contacto, con el cual puedo convertir a ese usuario en mi cliente. Para los fabricantes de browsers, la visualización de los campos de formularios no ha sido normalizada y cada uno lo hace a su criterio, incluso con diferencias entre el mismo browser pero en diferentes plataformas.

Checkboxes across browsers

Técnica 1: CSS + JavaScript (IE8+)

Para darle un diseño mejor y uniforme entre browsers/plataformas acudimos a un pequeño truco que involucra CSS y una pizca de JavaScript para el manejo de clases.

Para un simple y sencillo formulario con algunos input de tipo checkbox (el uso de la class="check" es para diferenciarlo de otros campos puedan existir en el mismo formulario):

<fieldset>
<label class="check" for="check1">
<input type="checkbox" checked="checked" id="check1">
Check 1
</label>
<label class="check" for="check2">
<input type="checkbox" id="check2">
Check 2
</label>
<label class="check" for="check3">
<input type="checkbox" id="check3">
Check 3
</label>
</fieldset>

La técnica consiste en envolver el input="checkbox" dentro del label, con tal de hacerlo completo clickeable. Así, escondemos con CSS el campo y trabajamos sólo con el label, habilitando al click en cada uno la inyección de una class="c_on" cuando el checkbox está siendo seleccionado.

label.check {
display: block;
cursor: pointer;
padding-left: 26px;
background: url('check_off.png') left center no-repeat;
}
label.check input {
position: absolute;
left: -9999px;
}
label.check.c_on {
background: url('check_on.png') left center no-repeat;
}

Finalmente acudimos a JavaScript para hacer el cambio de clase para mostrar tal o cual imagen:

var input = document.querySelectorAll("label.check input");
if(input !== null) {
[].forEach.call(input, function(el) {
if(el.checked) {
el.parentNode.classList.add('c_on');
}
el.addEventListener("click", function(event) {
event.preventDefault();
el.parentNode.classList.toggle('c_on');
}, false);
});
}

Técnica 2: CSS3 (IE9+)

Para esta técnica reordenamos el HTML ya que trabajaremos con selectores avanzados de atributos (siblings):

<fieldset>
<input type="checkbox" id="check1" checked="checked">
<label for="check1">Check 1</label>
<input type="checkbox" id="check2">
<label for="check2">Check 2</label>
<input type="checkbox" id="check3">
<label for="check3">Check 3</label>
</fieldset>

El CSS es extenso, ya que se trabaja con pseudo-clases :checked y :not(:checked), además de pseudo-elemento :after como se lee a continuación:

[type="checkbox"] {
position: absolute;
left: -9999px;
}
[type="checkbox"] + label:after {
content: '';
position: absolute;
}
[type="checkbox"] + label {
display: block;
position: relative;
padding-left: 26px;
cursor: pointer;
line-height: 36px;
font-size: 28px;
color: #e74c3c;
text-shadow: #2c3e50 2px 2px 1px;
transition: color .3s;
}
[type="checkbox"] + label:after {
width: 30px;
height: 30px;
transition: all .2s;
top: 0;
left: 0;
}
/* OFF */
[type="checkbox"]:not(:checked) + label:after {
background: url('check_off.png') left center no-repeat;
}
/* ON */
[type="checkbox"]:checked + label {
color: #fff;
}
[type="checkbox"]:checked + label:after {
background: url('check_on.png') left center no-repeat;
}

Comentarios

  1. Joaquín Bresan [#]

    Buen aporte. Gracias por compartir.

  2. Francisco Labbe [#]

    Muy buen trabajo.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab