Blog

Sígueme en

El remplazo perfecto para los checkboxes y radio inputs por defecto, manteniendo la validación HTML5

   CSS

Seguro que os habréis topado con bastantes snippets que hacen el trabajo sucio de remplazar los checkboxes y radio inputs por defecto del navegador, por otros más atractivos o que se adapten al resto de controles de formulario que utilice el sitio web. Eso lo hacen francamente bien, pero, lo que la mayoría pasa por alto es la validación HTML5 por defecto de los navegadores modernos, proceso bastante estandarizado y que funciona de maravilla, y que es una pena perder sólo por hacer un formulario más agradable visualmente.

Como siempre hay una solución para todo, con unas pocas líneas CSS, puedes tener unos bonitos checkboxes y radio inputs sin tener que sacrificar la validación HTML5 porque la consola javascript nos diga que «un elemento está fuera de foco«. La verdad que la clave está en remplazar un «display: none;«, que es lo que utilizan la mayoría de plugins para ocultar los checkbox y radio reales, por un «position: absolute; opacity: 0;«, y de ésta manera, permitir que el elemento pueda recibir el foco si tiene algún error de validación. Fijáos también que haciendo uso de la notación UNICODE, podemos poner símbolos gráficos sin necesidad de utilizar fuentes externas, gracias al atributo «content:’2713′;«, que es el que he decidido usar para éste ejemplo. Podéis utilizar cualquier símbolo de ésta tabla.

Éstas serían las líneas CSS y HTML necesarias para lograrlo:

CSS

.radio + .radio,
.checkbox + .checkbox { margin-top: 10px; }

label.checkbox.special { cursor: pointer; }
label.checkbox.special input[type="checkbox"] { position: absolute; margin-left: 5px; opacity: 0; }
label.checkbox.special input[type="checkbox"] + span:before {
    border: 1px solid #999;
    border-radius: 2px;
    color: #333;
    padding: 2px 1px;
    line-height: 8px;
    font-size: 30px;
    cursor: pointer;
    position: relative;
    top: 1px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: text-bottom;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 20px;
    height: 20px;
}
label.checkbox.special input[type="checkbox"] + span:before { content: ""; }
label.checkbox.special input[type="checkbox"]:checked + span:before { content: '\2713' }

HTML

<label for="test1" class="checkbox special"><input type="checkbox" id="test1" name="test1" value="1"><span>Example check 1</span></label>

DEMO