Stylized Bootstrap checkbox does not work

Asked

Viewed 3,267 times

1

Good afternoon, I have styled a checkbox group. Only it is not checked. I followed all the steps to make the change and still can’t leave it selected. Could someone see my code in codePen and tell me where I might be missing?

form.

<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 of the 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;
}

Thank you very much! Code html and css in codepen

html twitter-bootstrap css3 checkbox
  • 1

    Paulinha put the code in the body of the question, so it is easier to test it when someone is preparing the answer.

1 answer

2


Utilize for="input_id" in label

<input class="checkbox-nice"  type="checkbox" name="recursos" id="recursos-1" value="Chat Interno" checked>
<label for="recursos-1"> Chat Interno </label>

  • Hi Leonardo, can you change it in codePen for me? I didn’t understand right where I should move.. Thank you very much! Thanks!

  • HI Leonardo , only that there is a problem if I change the id it will give error in my reply form that picks up the resource array... The problem is when I stylize, if I leave normal without the change and with the native of the bootstrap it gets straight and dialing normally. The problem is when I insert this new class and then it doesn’t work anymore..

  • 1

    Sorry for the delay, what was missing was to connect the label to input, what is done through its id, thus http://codepen.io/leonardorodrigues/pen/ZBwbVg

  • As for the form, all checkboxes must have the same id?

  • Yes.. pq it goes through array on Asp, so id has to be the same, because it’s the field it takes to send..

  • Leonardo thank you so much for your guidance! I will adapt here in my code! Thank you so much for your patience and explanation! Thanks!!

  • 1

    Well, I think another way would be more complex, this is very simple, my suggestion would be to change the Asp form and get the array by tag name

Show 2 more comments

Browser other questions tagged html twitter-bootstrap css3 checkbox

You are not signed in. Login or sign up in order to post.