Styling checkbox using CSS

I am trying to style a custom checkbox on a form; my HTML looks something like this:

   <form id="contact">
       <input type="checkbox" id="option1" />
       <label for="option1">Option</label>
   </form>

My CSS looks something like this:

form input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0; opacity: 0.2; }

form label {
    padding-left: 20px;
    position: relative; }

form  label:before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    left: -10px;
    border: 1px solid #000; }

I wanted to add a background color when the checkbox is ticked so I added this rule:

input[type="checkbox"]:checked + label:before { background-color: #ccc; }

Which works like I wanted to, but I need to be specific only for the rule to work on a contact form, so I changed it to:

#contact input[type="checkbox"]:checked + #contact label:before { background-color: #ccc; }

This time it does not work. The background does not change when the checkbox is ticked.

My question is what is wrong with the CSS? What am I missing?