CSS checkbox y radios personalizados

No hay diseñador web que no le moleste personalizar un formulario. Son complejos y llenos de matices. E incluso hay lugares imposibles de tocar. ¡Hasta ahora!

En el siguiente tutorial vamos a ver como realizar un checkbox y un radio personalizado para un formulario en HTML. Sin preocuparnos de las limitaciones propias del CSS logrando adaptar nuestros diseños. Con la ayuda de un sencillo e ingenioso truco.

DEMO

Pulsa en cada elemento para verlo funcionar.

Radio

Checkbox

Radio

Estructuramos nuestro radio de forma natural. Pero debemos incluir un span vacío acompañando nuestro label.

<p>
	<input type="radio" id="genero__mujer" name="genero" checked>
	<label for="genero__mujer"><span></span>Mujer</label>
</p>
<p>
	<input type="radio" id="genero__hombre" name="genero">
	<label for="genero__hombre"><span></span>Hombre</label>
</p>

Ocultamos los radios y en su lugar mostramos en los span una imagen de fondo que previamente hemos preparado.

.demo input[type="radio"] {
	display: none;
}
.demo input[type="radio"] + label span {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin: -1px 4px 0 0;
	vertical-align: middle;
	background: url(radio-uncheck.png);
	background-size: cover;
	cursor: pointer;
}
.demo input[type="radio"]:checked + label span {
	background: url(radio-check.png);
	background-size: cover;
}

La imagen sin pulsar sería la siguiente.

Y pulsado sería así.

Checkbox

Se trabaja de la misma forma. Primero declaramos nuestro input con su label, pero dentro debe tener un span vacío.

<input type="checkbox" id="acepto" name="acepto" checked>
<label for="acepto"><span></span>Acepto todas las condiciones</label>

Mostramos una imagen de fondo dentro del span y ocultamos el checkbox original.

.demo input[type="checkbox"] {
	display: none;
}
.demo input[type="checkbox"] + label span {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin: -1px 4px 0 0;
	vertical-align: middle;
	background: url(checkbox-uncheck.png);
	background-size: cover;
	cursor: pointer;
}
.demo input[type="checkbox"]:checked + label span {
	background: url(checkbox-check.png);
	background-size: cover;
}

La imagen sin pulsar sería la siguiente.

Y pulsado sería así.

Conclusión

Sigue sin ser posible cambiar el CSS de algunos elementos de nuestro formulario, pero si que podemos enmascararlos con una imagen. Tal vez en un futuro tengamos más herramientas, pero por ahora es suficiente.

Si conoces alguna otra tecnica, deja un comentario.

Versión escritorio