I'm attempting to customize the style of a checkbox on a form, and here is what my HTML currently looks like:
<form id="feedback">
<input type="checkbox" id="option1" />
<label for="option1">Option</label>
</form>
Here is the CSS I have written for this customization:
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;
}
To add a background color when the checkbox is checked, I included this rule:
input[type="checkbox"]:checked + label:before {
background-color: #ccc;
}
However, I needed the rule to only apply to the contact form specifically, so I updated it to:
#contact input[type="checkbox"]:checked + #contact label:before {
background-color: #ccc;
}
Unfortunately, this change didn't work as expected. The background does not change when the checkbox is checked.
Can someone please help me understand what is wrong with my CSS? What am I overlooking?