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]: http://codepen.io/alepaula/pen/vybNNG