CSS ile Radyo Butonları ve Etiketleri Stil Verme

Radyo butonları ve etiketlerini görsel olarak hoş bir şekilde stil vermekte zorlandığınız oldu mu? Seçilen radyo butonlarının diğerlerinden belirgin bir şekilde öne çıkmasını sağlamak zor olabiliyor. Neyse ki, sadece biraz CSS ve bazı JavaScript ile bunu kolayca başarabilirsiniz.

Problemi Anlamak

Radyo butonları kullanan formlar tasarlarken, işlevsel bir düzenin yanı sıra görsel olarak da hoş bir düzen elde etmek önemlidir. Radyo butonlarının etiketleriyle düzgün bir şekilde hizalanması ve seçilen etiketin diğerlerinden farklı bir stil ile gösterilmesi yaygın bir gerekliliktir. Her iki görevi nasıl başarabileceğinizi inceleyelim.

Düzen: Radyo Butonlarının Etiketlerin Yanında Pozisyonlanması

Başlamak için, radyo butonlarının etiketlerinin yanına nasıl görünmesini istediğinize karar vermeliyiz:

• Sıra Düsturu Düzeni: Radyo butonları ve etiketleri aynı satırda görünür.
• Dikey Düzen: Radyo butonları ve etiketler dikey olarak üst üste dizilir.

Bu düzenleri elde etmek için iki yöntem:

Yöntem 1: Kenar Boşlukları ile Satır İçi Elemanlar Kullanma

Tüm radyo butonlarının aynı satırda hizalanmasını istiyorsanız, aralarına boşluk bırakmak için kenar boşlukları kullanabilirsiniz. İşte her şeyi düzgün bir şekilde hizalamak için basit bir CSS parçası:

<style type='text/css'>
    .input input {
        width: 20px; /* Radyo butonunun boyutu */
        margin-right: 10px; /* Buton ile etiket arasındaki boşluk */
    }
</style>

Yöntem 2: Satır Sonu Etiketleri Kullanma

Her seçeneğin kendi satırında görünmesini tercih ediyorsanız, satırı kırmak için <br /> etiketleri ekleyebilirsiniz. İşte bunun nasıl görüneceğine dair bir örnek:

<div class="input radio">
    <fieldset>
        <legend>Gökyüzünün rengi nedir?</legend>
        <input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />
        
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1" />
        <label for="SubmitQuestion1">Garip, ışıltılı yeşil.</label><br />
        
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2" />
        <label for="SubmitQuestion2">Karanlık, kasvetli turuncu</label><br />
        
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3" />
        <label for="SubmitQuestion3">Mükemmel, parlayan mavi</label>
    </fieldset>
</div>

Seçilen Etiketi Vurgulama

Şimdi, seçilen radyo butonunun etiketini stil vermeye geçelim. Ne yazık ki, bu biraz JavaScript gerektirir çünkü CSS tek başına hangi radyo butonunun seçili olduğunu belirleme yeteneğine sahip değildir.

Adım 1: Odak Stilinin Temel CSS’i

Başlamak için, odaklanmış etiket için bazı CSS eklemek isteyeceksiniz. Bu, hangi seçeneğin seçildiğini görsel olarak gösterecektir:

<style type='text/css'>
    .input label.focused {
        background-color: #EEEEEE; /* Seçilen etiket için arka plan */
        font-style: italic; /* Vurgulama için yazı stilini değiştir */
    }
</style>

Adım 2: Odak Yönetimi için JavaScript

Sonrasında, odaklı sınıfın eklenmesi ve kaldırılmasını işlemek için biraz JavaScript’e ihtiyacınız olacak. jQuery gibi bir kütüphane kullanmak bu işlemi çok daha kolay hale getirir:

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $('.input :radio').focus(updateSelectedStyle);
        $('.input :radio').blur(updateSelectedStyle);
        $('.input :radio').change(updateSelectedStyle);
    });

    function updateSelectedStyle() {
        $('.input :radio').removeClass('focused').next().removeClass('focused');
        $('.input :radio:checked').addClass('focused').next().addClass('focused');
    }
</script>

Özet

Kısacası, radyo butonları ve etiketleri etkili bir şekilde nasıl stil verebileceğinizi özetleyelim:

1. Pozisyonlama: Satır içi düzen için CSS kenar boşluklarını veya dikey yığma için <br /> etiketlerini kullanın.
2. Vurgulama: Temel stil için CSS kullanın ve seçilen radyo butonuna göre stilleri dinamik olarak güncellemek için JavaScript kullanın.

Bu tekniklerle, formlarınızın kullanıcı deneyimini artırabilir ve temiz, modern bir görünüm sağlarken. İyi kodlamalar!