Showing a checkbox as a button while keeping full checkbox functionality

This fixes some of the problems with checkboxes that people have started implementing with buttons

HTML

<div class="checkbox-button">
    <input id="check" type="checkbox" />
    <label for="check"><i class="icon-something"></i>Click to check</label>
</div>

CSS

.checkbox-button input[type=checkbox]
{
    visibility: hidden;
}

.checkbox-button input[type=checkbox] + label
{
    border: 5px outset lightgrey;
    background-color: lightgrey;
    
   
}

.checkbox-button input[type=checkbox]:checked + label
{
    color: white;
    border: 5px outset green;
    background-color: green;
}

.checkbox-button input[type=checkbox] + label i
{
    display: inline-block;
    vertical-align: middle;

    background-image: url(http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png);
}
.checkbox-button input[type=checkbox]:checked + label i
{
    background-image: url(http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png);
}

div{
    padding: 1em;
}