CODEWITHSUNDEEP
htmlcssformstwitter-bootstrapcheckbox
GVF
GVF

Reputation: 25

Custom checkbox don't work

I'm using bootstrap 3 and another css template. I want to stylize a checkbox using the template and it isn't work, because I can't use the input area. When I click it, nothing appear. This is the 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. The checkbox only run when I get out this rule : .checkbox input[type=checkbox] { display: none; }

If I have a lot of mistakes, be patient, please! This is my first question and I am begginer in html, too.

THANKS!!

Upvotes: 2

Views: 4725

Answers (2)

Jens Ackou
Jens Ackou

Reputation: 161

Just a thought but isn't display: none; preventing you to even see the input checkbox?

Upvotes: 0

Indy
Indy

Reputation: 4957

Clicking on label won't change the state of input, if it is not in the <label> tag. You have to add id to the checkbox and attribute for="" with checkbox id to the label to make this work:

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

Upvotes: 7

Related Questions