Cssde inputu id class ve type ile seçmek input:checked
Cssde inputu id class ve type ile seçmek için yapmanız gerekenlere göz atalım. Öncelikle type olarak seçicileri görelim.
HTML kodlarımız aşağıdaki gibi olsun.
<div class="row">
<div class="col-12">
<div class="checkbox">
<input type="checkbox" name="abonelik" id="aboneid" class="abone">
<label id="check" class="abone">Bültene Abone Ol</label>
</div>
</div>
</div>
input type ile seçelim;
Aşağıda type ı checkbox olan input u seçmiş olduk ve onunla birlikte + bitişik kardeş seçici ile inputtan sonra gelen labele etki etmesini sağladık
input[type=checkbox]:checked + label{
text-decoration: line-through;
}
id ile seçmek isteseydik;
input#aboneid:checked + label {background:url('image-1.jpg');}
input name ile seçersek;
input[name=abonelik]:checked label.abone {
color: red;
}
/* name i abonelik olan input seçilince class ı abone olan labelin yazı rengini kırmızı yap */
Yukarıdaki yazım ile label class ı abone olan tüm labellere etki ettik, biz sadece name i abonelik olan inputtan sonraki labele etki etmek istiyorsak yine bitişik kardeş seçici ile yapmalıyız ( + işareti )
input[name=abonelik]:checked + label.abone {
color: red;
}
Bir inputu sadece seçince label i göstermesi için;
<input id="taksitli" name="kart" type="radio">
<label for="taksitli" class="kartlabel">Other...</label>
.kartlabel { /*kartlabel i gösterme*/
display: none;
}
input:checked + .kartlabel { /*input seçilince kartlabel i göster*/
display: block;
}
Diğer yazılarımız için YAZILIM bölümümüzü ziyaret edin.