Checkbox - CSS (Not-adjacent)
Checkbox - CSS (Not-adjacent)
by Andy Blueman
HTML
<div>
<label>Box 1:</label>
<input class="form-checkbox" type="checkbox">
<div>Box 1 is checked.</div>
</div>
<div>
<label>Box 2:</label>
<input class="form-checkbox" type="checkbox">
<div>Box 2 is checked.</div>
</div>
<div>
<label>Box 3:</label>
<input class="form-checkbox" type="checkbox">
<div>Box 3 is checked.</div>
</div>CSS
label {display:block;}
label ~ input[type="checkbox"] ~ div {display:none; margin-left:1em;}
label ~ input[type="checkbox"]:checked ~ div {display:inline;}