Boa tarde, Eu estilizei um grupo de checkbox. Só que ao clicar ela não fica marcada. Segui todos os passos para fazer a mudança e mesmo assim não consigo deixar selecionado. Alguém poderia ver o meu código no codePen e me dizer onde posso estar errando?
formulario.asp
<div class="form-group">
<div class="checkbox-nice">
<input class="checkbox-nice" type="checkbox" name="recursos" id="recursos" value="Chat Interno">
<label for="Chat Interno"> Chat Interno </label>
</div>
<div class="checkbox-nice">
<input class="form-check-input" type="checkbox" name="recursos" id="recursos" value="Confirmação Automatica por SMS">
<label class="form-check-label"> Confirmação Automática por SMS </label>
</div>
<div class="checkbox-nice"><input class="form-check-input" type="checkbox" name="recursos" id="recursos" value="App para Android">
<label class="form-check-label"> App para Android </label>
</div>
<div class="checkbox-nice">
<input class="form-check-input" type="checkbox" name="recursos" id="recursos" value="Relatorios com Graficos">
<label class="form-check-label"> Relatórios com Gráficos </label>
</div>
<div class="checkbox-nice">
<input class="form-check-input" type="checkbox" name="recursos" id="recursos" value="Envio de E-mail pelo Sistema">
<label class="form-check-label"> Envio de E-mail pelo Sistema </label>
</div></div>
css do checkbox
.checkbox-nice {
position: relative;
padding-left: 15px;
}
.checkbox-nice input[type=checkbox] {
visibility: hidden;
}
.checkbox-nice label {
padding-top: 3px;
}
.checkbox-nice.checkbox-inline>label {
margin-left: 16px;
}
.checkbox-nice label:before {
cursor: pointer;
position: absolute;
width: 22px;
height: 22px;
left: 1px;
top: 1px;
background: #ffffff;
content: "";
border: 1px solid #a62b32;
border-radius: 3px;
background-clip: padding-box;
}
.checkbox-nice label:after {
opacity: 0;
content: '';
position: absolute;
width: 12px;
height: 7px;
background: transparent;
top: 7px;
left: 6px;
border: 3px solid #a62b32;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.checkbox-nice label:hover::after {
opacity: 0.3;
}
.checkbox-nice input[type=checkbox]:checked+label:after {
opacity: 1;
}
Muito obrigada! Codigo html e css no codepen