State button case - CSS only

HTML

<input /><br /><br />
<div id="test1">
    <label title="click to  check">
    <input type="checkbox" />
        <span>check me</span>
    </label>
    <br />
</div><br /><br />
<input />
<pre>
The text inputs are there in order to test tabbing.
The control receives focus and changes its looks, it 
gets a dotted gray border around the label. 
With the control focused, the spacebar trips it. 
On hover it shows the gray check mark affordance, 
this tells that it works like a checkbox. 
Clicking the label trips the checkbox and its style 
changes.
The CSS is too complicated, brittle, impractical. 

Inline images made here: 
http://www.scalora.org/projects/uriencoder/ 
In IE8 the label does not change its looks. 
In FF12 the checkbox does not obbey the width style. 
</pre>

CSS

#test1 { font-family:sans-serif; border:3px solid rgb(160,160,160); display:inline-block; border-radius:4px; }
#test1 input[type="checkbox"] + span {
    border:1px solid transparent;
}
#test1 input[type="checkbox"]:checked + span {
    background-repeat: no-repeat;
    background-position: 5px center;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAQMAAACTYuVlAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAqSURBVHicY/h/gOF/A8N/BoZ/CgxzEhgkHjAIPmBgfsDA/oCB/wHD/AcA2fQMeXzFYwcAAAAASUVORK5CYII=);    
}
#test1 input[type="checkbox"]:focus + span {
    border:1px solid red;
}
#test1 input[type="checkbox"] { 
    opacity:0; 
    margin:0;
    padding:0;
    display:inline-block;
    position:absolute;
    left:0px;
    top:0px;
}
#test1 label { position:relative; display:inline-block; }
#test1 span { padding-left:18px; }
#test1 label:focus { color:blue; }

#test1 span:hover { 
    cursor:pointer;
    background-repeat: no-repeat;
    background-position: 5px center;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAQMAAACTYuVlAAAABlBMVEXf39/AwMDyrNXMAAAAAXRSTlMAQObYZgAAAChJREFUeF4FwLENABAABMCzidE+sYjRjKLTiVKhECphKkPrFpvH5RAfepMIHnYve4wAAAAASUVORK5CYII=);
    }