CSS Checkbox visibility example

by cuhuak

HTML

<input type="checkbox" name="visibility" id="visibility" /> Visible?

<div class="controls">
    <input type="checkbox" name="checkbox" id="checkbox1" /> <label for="checkbox1">checkbox1</label>
    <br>
    <input type="checkbox" name="checkbox" id="checkbox2" /> <label for="checkbox2">checkbox2</label>
</div>
<br>
<br>
<input type="checkbox" name="visibility" id="visibility" /> Visible?
<div class="controls">
    <input type="radio" name="radio" id="radio1" /> <label for="radio1">radio1</label>
    <br>
    <input type="radio" name="radio" id="radio2" /> <label for="radio2">radio2</label>
</div>

CSS

body {
    margin: 10px;
}
.controls {
    line-height: 2em;
}
.controls label {
    border-radius: 4px;
    padding: 2px 4px;
    margin-bottom: 4px;
}
.controls input:checked + label {
    background: orange;
}
.controls input + label:hover {
    background: yellow;
}
.controls input {
    visibility: hidden;
}

#visibility:checked + div.controls > input {
    visibility: visible;
}