9 Ocak 2011, Pazar
CSS - Nasıl Stil için Seçilen Radyo düğmesi için bir Etiket?
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ı?
CEVAP
9 Ocak 2011, Pazar
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.
Bunu Paylaş:
Nasıl jQuery ile bir radyo düğmesi kon...
Raylar radyo düğmesi için bir etiket f...
Nasıl seçili radyo düğmesi değerini al...
nasıl radyo düğmesi varsayılan olarak ...
nasıl tek bir radyo düğmesi kontrol ed...