Checkbox - CSS (adjacent)

Checkbox - CSS (adjacent)

by Andy Blueman

HTML

<label>Box 1:</label> <input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-131" type="checkbox"><div class="tipo-uf-131">Box 1 is checked.</div>

<label>Box 2:</label> <input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-134" type="checkbox"><div class="tipo-uf-134">Box 2 is checked.</div>

<label>Box 3:</label> <input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-130" type="checkbox">
<div class="tipo-uf-130">Box 3 is checked.</div>

CSS

/*styled relative to the label*/
label {display:block;}
label + input[type="checkbox"] + div {display:none; margin-left:1em;}
label + input[type="checkbox"]:checked + div {display:inline;}