What CSS selector modifies the checkbox label when the input is inside the label?
I'm trying to replace the default browser checkbox style, but my input is inside my label.
I am using Django and the form output for the CheckboxSelectMultiple field looks like this:
<label for="id_field">Field Name</label>
<ul id="id_field">
<li><label for="id_field_0"><input id="id_field_0" name="field" type="checkbox" value="0" /> Field 1 Name</label></li>
<li><label for="id_field_1"><input id="id_field_1" name="field" type="checkbox" value="1" /> Field Name 2</label></li>
</ul>
I can still style the label, but how do I change the style of the label when #id_field_0:checked
? CSS has no way to go back to the parent object, does it? What selector can I use, accomplish this?
source to share
demo - http://jsfiddle.net/victor_007/vjp9f7L2/8/
used range for style checkbox
and :before
pseudo
* {
margin: 0;
padding: 0;
}
label {
display: inline-block;
}
label > input + span {
cursor: pointer;
}
span {
display: block;
}
label > span.check {
background: url('http://cdn.flaticon.com/png/32/24396.png');
width: 32px;
height: 32px;
}
label > input {
position: absolute;
visibility: hidden;
width: 32px;
height: 32px;
}
label > input:checked + span:before {
content: url('http://cdn.flaticon.com/png/32/60731.png');
display: block;
}
<label>
<input id="" type="checkbox" value="" name="" /> <span class="check"></span>
</label>
<label>
<input id="" type="checkbox" value="" name="" /> <span class="check"></span>
</label>
<label>
<input id="" type="checkbox" value="" name="" /> <span class="check"></span>
</label>
source to share
Now this is not possible, you can try this:
<label for="id_field">Field Name</label>
<ul id="id_field">
<li>
<input id="id_field_0" name="field" type="checkbox" value="0">
<label for="id_field_0">Field 1 Name</label>
</li>
<li>
<input id="id_field_1" name="field" type="checkbox" value="1">
<label for="id_field_1">Field Name 2</label>
</li>
</ul>
And then in CSS:
label {/* all labels */}
input + label {/* label after input which is the same as "input in label" */}
You used an attribute for
that is not needed when using inputs inside labels, so there won't be any additional HTML.
source to share
<label>
<input id="num" type="checkbox" value="" name="numbers" /> <span class="check"></span>
</label>
<label>
<input id="" type="checkbox" value="" name="" /> <span class="check"></span>
</label>
<label>
<input id="" type="checkbox" value="" name="" /> <span class="check"></span>
</label>
source to share