Checkbox y Radio Buttons Personalizados

Con esta técnica conseguiremos dar estilos personalizados a los input de tipo radio y checkbox. 

Básicamente tenemos que crear el elemento input de tipo radio o checkbox y ocultarlo con la propiedad opacity. A continuación creamos otro elemento (por ejemplo un span) que será el input falso que nosotros visualizaremos en pantalla, quedando el span en primer plano. Por último, tenemos que posicionar los elementos, con position:absolute y propiedades top y left.

Podemos ver un ejemplo debajo:

See the Pen RNqgVm by Pedro Marín (@pedromarin) on CodePen.

HTML:

<div class="contenedorinputs">
    <input class="inputradio" type="checkbox"> 
    <span class="inputfalso"></span>
</div>
<!-- para hacerlo con un radiobutton <input class="inputradio" type="radio"> -->

Cuando pulsamos el input verdadero (que está oculto), no lo vemos, pero el input toma el atributo checked. Ahora podemos utilizar ese atributo checked para seleccionar con el pseudoelemento :checked el span que hemos creado junto con el pseudoelemento :after (lo combinamos con el selector  +, que es el que selecciona el elemento que está justo a continuación).

CSS:

.contenedorinputs {
    position: relative;
}
.inputradio{
   
    opacity: 0; /* Ocultamos el input verdadero con opacity: 0 */
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0px;
    left: 0px;
}
.inputfalso{
    border: 2px solid #dedede;
    border-radius: 50%;
    display: inline-block;
    height: 20px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 21px;
    z-index: -1;
}

input[type="checkbox"]:checked + span:after {    
content: "✔"; /* el valor de la propiedad content también puede ser cualquier imagen, sólo tendríamos que pasarle la ruta de la imagen*/
    position: absolute;
    text-indent: 2px;
    top: -1px;
    left: 2px;
    color: red;
}
/* Para utilizarlo con un radiobutton > input[type="radio"]:checked + span:after */