Front.id

Uno de las primeras tareas que realizamos al momento de sentar las bases en la maquetación de nuestro sitio, es la de darle estilos a los elementos de formulario.

En esta oportunidad vamos a ver como embellecer los check y radio buttons con CSS puro o utilizando de fondo alguna imagen de nuestra elección.

Para ejemplo vamos a tomar la estructura HTML típica de un checkbox, pero esto sirve de igual manera para los radio buttons.

<div class="wrapper">
    <input id="option" type="checkbox" name="field" value="option">
    <label for="option">Input checkbox normal</label>
</div>

Básicamente, lo que vamos a hacer es ocultar el input bajo el label para poder emular con el label la apariencia que queremos darle a nuestro checkbox tanto en estado normal como seleccionado.

input[type=checkbox]:not(old) {
  /* El input */
}

input[type=checkbox]:not(old):checked {
  /* El input en estado seleccionado */
}

input[type=checkbox]:not(old) + label {
  /* Label */
}

** Al final del ejemplo voy a explicar brevemente el uso que hemos hecho en este caso de algunos selectores, pseudo-clases y pseudo-elementos.

Como dije anteriormente, podemos usar puro CSS para darle el estilo que deseemos a estos input o utilizar imágenes como background. 

Esta parte del código es compartida por ambas formas de hacerlo:

.wrapper {
  position: relative;
}

input[type="checkbox"]:not(old) {

  /* Opacidad para ocultar el input */
  opacity: 0;

  /* Position para dejar el input bajo el label
     (Es importante agregar al contenedor una posición relativa) */
  position: absolute;
  top: 0;
  left: 0;
}

/* Este es un pequeño reset */
input[type="checkbox"]:not(old) + label::-moz-selection,
input[type="checkbox"]:not(old) + label::selection {
  color: inherit;
  background-color: transparent;
}

Y ahora vamos a profundizar en cada opción.

CSS puro:

input[type="checkbox"]:not(old) + label {
   cursor: pointer;
}

input[type="checkbox"]:not(old) + label:before {
   content: '';
   width: 15px;
   height: 15px;
   border: 1px double black;
   cursor: pointer;
   vertical-align: top;
   display: inline-block;
   margin-right: 5px;
}

input[type="checkbox"]:not(old):checked + label:before {
   /* Estilos del input seleccionado */
   box-shadow: inset 0 0 1px 2px white;
   background: deepskyblue;
}

Resultado:

Background image:

input[type="checkbox"]:not(old) + label {
  background: url("../imgs/input-bg-image.png") no-repeat 0 0;
  cursor: pointer;
  padding-left: 20px;
}

input[type="checkbox"]:not(old):checked + label {
  background: url("../imgs/input-check-bg-image.png") no-repeat 0 0;
}

Resultado:

** Selectores y Pseudo-clases utilizadas en este ejemplo:

:not(old) (*Opcional)

El pseudo-class :not() junto al selector "old" lo utilizamos para ocultar las reglas de estilo de navegadores con soporte incompleto para los selectores CSS3.

:checked

El selector :checked nos sirve para apuntar al elemento input en estado seleccionado.

::selection

Este selector lo usamos para hacer un pequeño reset de los estilos de remarcado que por defecto agregan los navegadores o hayamos podido usar nosotros mismos.