custom check box not checking

I have a basic custom check box, There is one main problem.

I need the box to change state to checked on click of the box I cant seem to get this to work on check of the box itself.

HTML

 <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> 

css

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: "☑";
}