radio-controlled boxes

css only states

by moob

HTML

<section>    
<input type="radio" id="s0y" name="s0" class="yes" />
<input type="radio" id="s0n" name="s0" class="no" />
<div>
<p>This uses radio boxes to record the state (and hidden labels to control it)</p>
<label for="s0y">Yarp</label><label for="s0n">Narp</label>
</div>
</section>

<section>    
<input type="radio" id="s1y" name="s1" class="yes" />
<input type="radio" id="s1n" name="s1" class="no" />
<input type="radio" id="s1m" name="s1" class="maybe" />

<div>
<p>
Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.</p>
<label for="s1y">Yay</label><label for="s1n">Nay</label><label for="s1m">Maybe</label>
</div>
</section>

CSS

*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; margin:0; padding:0;;}

section input[type=radio] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    visibility:hidden;
}

section {margin:30px;}
section div {background:#aaa;}
section div p {}
section .yes:checked ~ div {background:lightgreen;}
section .no:checked ~ div {background:pink;}
section .maybe:checked ~ div {background:lightblue;}
section label {padding:10px; display:inline-block; text-align:center; background-color:green}
section label+label {background-color:red}
section label+label+label {background-color:blue}