Checkboxes con estilo

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.

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><br />
  <label class="check" for="check1"><br />
    <input type="checkbox" checked="checked" id="check1"><br />
    Check 1<br />
  </label><br />
  <label class="check" for="check2"><br />
    <input type="checkbox" id="check2"><br />
    Check 2<br />
  </label><br />
  <label class="check" for="check3"><br />
    <input type="checkbox" id="check3"><br />
    Check 3<br />
  </label><br />
</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 {<br />
  display: block;<br />
  cursor: pointer;<br />
  padding-left: 26px;<br />
  background: url('check_off.png') left center no-repeat;<br />
}<br />
label.check input {<br />
  position: absolute;<br />
  left: -9999px;<br />
}<br />
label.check.c_on {<br />
  background: url('check_on.png')  left center no-repeat;<br />
}

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

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

Técnica 2: CSS3 (IE9+)⌗

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

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

[1]: http://www.csslab.cl/2007/12/06/la-descendencia-del-css/ “Enlace en CSSLab a “La descendencia del CSS””