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.