html - Custom checkbox don't work -

html - Custom checkbox don't work -

i'm using bootstrap 3 , css template. want stylize checkbox using template , isn't work, because can't utilize input area. when click it, nil appear. this code:

html:

<div class="checkbox check-primary "> <input type="checkbox" value=""> <label>guardar usuario</label> </div>

css:

.checkbox { display: block; min-height: 20px; vertical-align: middle; } .checkbox input[type=checkbox] { display: none; } .checkbox label { display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right: 15px; font-size: 13px; margin-bottom: 6px; color: #777a80; transition: border 0.2s linear 0s,color 0.2s linear 0s; } .checkbox label:before { content: ""; display: inline-block; width: 17px; height: 17px; margin-right: 10px; position: absolute; left: 0px; top: 1.4px; background-color: #fff; border: 1px solid #c2c6cb; border-radius: 3px; transition: border 0.2s linear 0s,color 0.2s linear 0s; } .checkbox input[type=checkbox]:checked + label::after { font-family: 'fontawesome'; content: "\f00c"; } .checkbox label::after { display: inline-block; width: 16px; height: 16px; position: absolute; left: 3.2px; top: 0px; font-size: 11px; transition: border 0.2s linear 0s,color 0.2s linear 0s; }

that all. checkbox run when out rule : .checkbox input[type=checkbox] { display: none; }

if have lot of mistakes, patient, please! first question , begginer in html, too.

thanks!!

clicking on label won't alter state of input, if not in <label> tag. have add together id checkbox , attribute for="" checkbox id label create work:

<div class="checkbox check-primary "> <input id="checkbox-1" type="checkbox" value=""> <label for="checkbox-1">guardar usuario</label> </div>

html css forms twitter-bootstrap checkbox