1

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

1
  • 1
    Paulinha coloque o código no corpo da pergunta, assim fica mais fácil para testa-lo quando alguém for elaborar a resposta.
    – gato
    Commented 18/12/2016 às 18:02

1 Resposta 1

2

Utilize for="input_id" na label

<input class="checkbox-nice"  type="checkbox" name="recursos" id="recursos-1" value="Chat Interno" checked>
<label for="recursos-1"> Chat Interno </label>
7
  • oi Leonardo, você pode alterar la no codePen pra mim? Eu não entendi direito a onde devo mexer.. Muito Obrigada! Valeu!
    – Paulinha
    Commented 18/12/2016 às 17:57
  • OI Leonardo , só que tem um problema se eu mudar o id ele vai dar erro no meu formulario de resposta que pega o array dos recursos... O problema esta quando eu estilizo, se eu eu deixo normal sem a mudança e com o nativo do bootstrap ele fica certinho e marcando normalmente. O problema é quando eu insiro essa classe nova e dai ele nao funciona mais..
    – Paulinha
    Commented 18/12/2016 às 18:00
  • 1
    Desculpe a demora, o que faltava era ligar a label a input, o que se faz por meio de sua id, assim codepen.io/leonardorodrigues/pen/ZBwbVg Commented 18/12/2016 às 18:12
  • Quanto ao formulário, todas as checkbox tem que ter a mesma id? Commented 18/12/2016 às 18:13
  • 1
    Bom, acho que uma outra forma seria mais complexo, essa é bem simples, minha sugestão seria mudar o formulário asp e obter a array pela tag name Commented 18/12/2016 às 18:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .