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:
Ver originalinput[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.