SORU
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ş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Marques Brownlee

    Marques Brow

    21 Mart 2008
  • MrMimoB

    MrMimoB

    11 NİSAN 2011
  • paikimchung

    paikimchung

    12 Mayıs 2006