Radio button seçili etiket için bir stil eklemek istiyorum:

HTML:

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked>All</label>
 <label><input type="radio" value="false">Open</label>
 <label><input type="radio" value="true">Archived</label>
</div>

CSS

.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
    background:Red;
    border:1px solid green;
    padding:2px 10px;
}
.radio-toolbar label   input[type="radio"]:checked { 
    background:pink !important;
}

Neyi yanlış yapıyorum fikri olan var mı?

HTML:

<div class="radio-toolbar">  
    <input type="radio" id="radio1" name="radios" value="all" checked>
    <label for="radio1">All</label>

    <input type="radio" id="radio2" name="radios"value="false">
    <label for="radio2">Open</label>

    <input type="radio" id="radio3" name="radios" value="true">
    <label for="radio3">Archived</label>
</div>

CSS:

.radio-toolbar input[type="radio"] {
    display:none;
}

.radio-toolbar label {
    display:inline-block;
    background-color:#ddd;
    padding:4px 11px;
    font-family:Arial;
    font-size:16px;
}

.radio-toolbar input[type="radio"]:checked   label {
    background-color:#bbb;
}

Canlı demo:http://jsfiddle.net/heZBT/

Öncelikle, muhtemelen radyo düğmeleri name öznitelik eklemek istiyorum. Aksi takdirde, aynı grubun bir parçası değildir, ve birden fazla radyo düğmeleri kontrol edilebilir.

Kardeşler (radyo düğmeleri) etiketler koydum beri ayrıca, id kullanmak zorunda kaldım ve for bunları birbirine ilişkilendirmek için öznitelikleri.