Styling input elements with CSS3 by wrapping input with a label

Question

CSS3 experts:

I'm trying to re-style an input checkbox, I can do it with the following style if I give each input an ID and refer to it with a label and it's "for" property:

<input class="checkbox" type="checkbox" id="myCheckBox><label for="myCheckBox">foo</label>

I'd like to loose the id's to simplify so I tried wrapping the input with the label but I can't seem to figure out how to style it:

<label>foo<input class="checkbox" type="checkbox"></label>

This is my working CSS using IDs:

.checkbox {
    display:none;
}
.checkbox + label {
    cursor:pointer;
    background-color: #fff;
    border:1px solid #333;
    padding:9px;
    border-radius:5px;
    display: inline-block;
    position: relative;
    top:3px;
    width:10px;
    height:10px;
}
.checkbox:checked + label {
    background-color: #e00000;
    border: 1px solid #e00000;
    color: #fff;
}
.checkbox:checked + label:after {
    color: #fff;
    width: 100%;
    text-align: center;
    font-size:1em;
    line-height:1em;
}

Totally got me stumped, any help would be appreciated :)

Answer 1

I usually go where you went with the whole adjacent sibling selector (input + label), but if you don't like that, you can always add a wrapping element for styling purposes. Unfortunately it does dirty the markup a little, but I don't really see any other way to style that and not use the id and for approach.

Not ideal, but it works.

input[type=checkbox] {
    display:none;
}
input[type=checkbox] + div {
    cursor:pointer;
    background-color: #fff;
    border:1px solid #333;
    padding:9px;
    border-radius:5px;
    display: inline-block;
    position: relative;
    top:3px;
    width:10px;
    height:10px;
}
input[type=checkbox]:checked + div {
    background-color: #e00000;
    border: 1px solid #e00000;
    color: #fff;
}
input[type=checkbox]:checked + div:after {
    color: #fff;
    width: 100%;
    text-align: center;
    font-size:1em;
    line-height:1em;
}

<label><input type="checkbox"><div>foo</div></label>