Edit in JSFiddle

<div class="box hover">(div):hover</div>
<div class="box active">(div):active</div>
<input type="text" class="box focus" value="(input):focus"/>
<div class="box"><input type="checkbox" class="hide checked" value="(input):checked"/><div class="text">(checkbox) :checked</div></div>
<input type="number" class="box range" min="5" max="10" title=":in-range, :out-of-range" value="7"/>
<input type="email" class="box valid" value="[email protected]" title="validates email"/>
<div class="def box" style="line-height:15px">   
<input class="radio" type="radio" name="group2" value="Water"> Water<br>
<input class="radio" type="radio" name="group2" value="Beer"> Beer<br>
<input class="radio" type="radio" name="group2" value="Wine" default> Wine<br>
</div>
<div  class="req box">
    <div class="text">
    <input required type="text" value=":required" style="width:80%"/>
    <input type="text" value=":optional" style="width:80%"/>
    </div>
</div>  

<div  class="rw box">
    <div class="text">
    <div style="width:80%">:read-only</div>
    <input type="text" name="group2" value=":read-write" style="width:80%"/>
    </div>
</div>  

.box {
    position: relative;
    width:100px;
    height:100px;
    display:inline-block;
    border-style: dotted;
    border-width: 1px;
    font-family: monospace;
    font-size: 9pt;
    vertical-align: top;
    margin: 3px;
    box-sizing: border-box !important;
    line-height: 100px;
    transition: all 1s;
    background-color:white;
    
}

.text{
        margin-top: 25px;
        line-height: 25px;
}

.hide {
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    margin: 0px;
    box-sizing: border-box !important;
    opacity:0;
}



.hover:hover, .active:active, .focus:focus, .checked:checked, .range:out-of-range, .range:invalid, .valid:invalid, :default, :required, .rw :read-only{
    background:red;
    opacity:1;
}

.range:in-range, .valid:valid, .req :optional, .rw :read-write {
    background:green;
    opacity:1;
}

.radio:checked{
    /*opacity:0.2;*/
    box-shadow: 0 0 15px purple;
}