CODEWITHSUNDEEP
htmlcsscheckboxinput
Benjamin Oats
Benjamin Oats

Reputation: 573

CSS: Custom check box not working

I have a basic custom check box and I need the box to change state to checked on click of the box but its not working. Can someone please help me to find out the problem?

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + .accord-text:before {
  display: block;
  content: "☐";
  width: 30px;
  height: 30px;
  color: green;
}

input[type=checkbox]:checked + .accord-text:before {
  content: "☑";
}
<lable for='product-45-45'>
  <input type='checkbox' style="float:right;"/>
  <div class="accord-text">
    <strong>header:</strong> sub text
    <strong>more text!</strong>
  </div>
</lable>

Upvotes: 3

Views: 2203

Answers (2)

kukkuz
kukkuz

Reputation: 42352

You must link your label (note that it is misspelled lable in question) for with the input id for it to work - see demo below:

input[type=checkbox] {
  display: none;
}
input[type=checkbox] + .accord-text:before {
  display: block;
  content: "☐";
  width: 30px;
  height: 30px;
  color: green;
}
input[type=checkbox]:checked + .accord-text:before {
  content: "☑";
}
<label for='product-45-45'>
  <input type='checkbox' style="float:right;" id='product-45-45'/>
  <div class="accord-text">
    <strong>header:</strong> sub text
    <strong>more text!</strong>
  </div>
</label>

Upvotes: 5

Mohammad Usman
Mohammad Usman

Reputation: 39322

Make following two corrections in your code:

  1. You are using misspelled HTML tags.

    <lable for='product-45-45'>
    ^^^ Check spelling here. Must be <label>

  2. You forgot to add id to the input element connected with label.

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + .accord-text:before {
  display: block;
  content: "☐";
  width: 30px;
  height: 30px;
  color: green;
}

input[type=checkbox]:checked + .accord-text:before {
  content: "☑";
}
<label for='product-45-45'>
  <input type='checkbox' id="product-45-45" style="float:right;"/>
  <div class="accord-text">
    <strong>header:</strong> sub text
    <strong>more text!</strong>
  </div>
</label>

Upvotes: 4

Related Questions