[SOLUCIONADO] Personalizar checkbox y radio

[MaNuX0218]

Buenas a todos, necesito una ayuda para la personalización de input checkbox y radio.

En principio todo va perfecto, pero no consigo hacer que el input sin personalizar se oculte y a la misma vez pueda darle clic para hacer el efecto de personalización.

Os dejo el código:

Código CSS:

input[type=checkbox],
input[type=radio] {
    position: absolute;
    margin: 0;
    cursor: pointer;
    outline: none;
    opacity: 1;
    display: inline-block;
}
.checkbox,
.radio {
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    margin-top: 10px;
    vertical-align: middle;
}
.checkbox:before,
.radio:before {
    content: "\f096";
    font-family: fontawesome;
    display: inline-block;
    font-size: 18px;
    vertical-align: middle;
    background-color: none;
    margin: 0;
    padding-right: 5px;
}
input[type=checkbox]:checked + .checkbox:before,
input[type=radio]:checked + .radio:before {
    content: "\f046";
    font-family: fontawesome;
    font-size: 18px;
    color: #e37222;
    padding-right: 3px;
}
 

Un saludo.

[ArturoGallegos]

prueba esto
https://jsfiddle.net/fLoexxw7/

[MaNuX0218]

Iniciado por ArturoGallegos

prueba esto
https://jsfiddle.net/fLoexxw7/

Muchas gracias