Css ile Radio Butonlarını Şekillendirme

Birçok yerde ki bunlardan birisi de benim sitemdeki ankette olan radio butonlarının şekillendirilmesinin nasıl olduğunu göreceğiz. Eskiden bu tarz düzenlemeleri yapabilmek için bıktıran usandıran kodlar ile taklalar atardık. Şimdi ise Css3 ile gelen düzenlemeler ve kullanımlarla bu şekillendirmeyi çok kolay bir biçimde hazırlamış olacağız. Şimdi bir anket oluşturup bunu nasıl şekillendireceğimizi görelim.

İlk önce basit bir anket formu oluşturuyoruz. Listelenmiş bir cevap ve bu cevaba ait bir sorunun olduğu klasik bir düzen.

<h3>Hangi Tarayıcıyı Kullanıyorsun?</h3>
<ul>
<li>
<label for="anket1">
<input type="radio" id="anket1" name="anket" class="x" />
<span>İnternet Explorer</span>
</label>
</li>
<li>
<label for="anket2">
<input type="radio" id="anket2" name="anket" class="x" />
<span>Yandex</span>
</label>
</li>
<li>
<label for="anket3">
<input type="radio" id="anket3" name="anket" class="x" />
<span>Google Chrome</span>
</label>
</li>
</ul>

Basit bir şekilde bir anket formu hazırlamış olduk. Ben ek olarak düzenlemeler yapabilmek için class atadım. Şimdi görünüm olarak <li> yapısından dolayı lanet listeleme şekilleri çıkacaktır ilk olarak ondan kurtulup standart bir düzenleme yapalım. Css düzenlememiş de şu şekilde olacaktır;

<style type="text/css">
body {font:20px Arial}
ul, li {list-style-type: none;margin: 0;padding: 0}
</style>

Biraz abartı bir font boyutu seçsem de şekillendirmemizi halletmiş olduk. Şimdi asıl konumuza gelmek gerekirse burada nasıl bir şekillendirme yapabiliriz. Genel Aynı standartı bozmadan butonlar solda yazılar sağda olacak şekilde düzenleme yapalım.

<style type="text/css">
.x {display: none}
.x + span {
display: inline-block;
position: relative;
padding-left: 40px;
height: 30px;
line-height: 30px;
cursor: pointer;
margin-bottom: 15px;
}
.x + span:before {
content: 'YOK';
display: block;
position: absolute;
left: 0;
top: 0;
background: silver;
width: 30px;
margin-right: 10px;
text-align: center;
border-radius: 15px;
}
.x:checked + span:before {
content: 'OK';
background: green;
color: white;
}
</style>

Şöyle yaparak düzenlememizi yapmış oluyoruz. Peki, ne yaptık burada biz?

".x + span" seçicisiyle seçtiğimiz elementleri block level elementlere çevirelim, sonrasında ".x + span:before" seçicisiyle span elementimizin önüne bir element oluşturacağız. Bu kısım biraz kafa karıştırıcı gelebilir, css before ve after konusunu sitede aratarak öğrenebilirsiniz.

".x + span:before" ile seçtiğimiz sözde elementi bir block level elemente çeviriyoruz ve position absolute ile havada asılı hale getirelim. Bu elementin ailesi (parent) olan ".x + span" elementi daha önce block level ve relative duruma getirilip bulunduğu noktada asılı hale getirilmişti. Şimdi before sözde elementini istediğimiz noktaya pozisyonlayabiliriz. Bu sözde element ile görsel olarak, tick veya x işaretini oluşturacağız. Bir radio butonun doğal durumunun seçili olmadığı durumu olduğunu düşünürsek bu sözde elementin doğal görünümü "X" işaretçisi olacaktır. Bunu bir imajla da tasarlayıp tamamen özelleştirebilirsiniz. Ben basit bir örnekleme ile ascii karakterlerini doğrudan css içine yazdım, aslında bunu yapmamak gerek, çünkü IE gibi tarayıcılarda bu karakterler çalışmayacaktır.

Başta gizlediğimiz radio input elementini bu noktaya kadar görünür halde tutup, hazırladığım kodun, yaptığım tıklamaları doğru yakalayıp yakalamadığını form elementi üstünde görecek şekilde geliştiriyorum. Bu noktada input'lari css'den gizliyoruz ve kodumuz hazır duruma geliyor.
- 24.08.2013 / 19:05:34 8

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

Genel Makaleler

CloudFlare Hakkında Detaylı Bilgiler | Bulut Teknolojisi

Kategori: Genel Makaleler | 17.10.2013
10:53 Php Dersleri
11:49 Javascript

Javascript Try - Catch - Finally Yapısı

Kategori: Javascript | 22.04.2014
Java Dersleri

Java Programlama Derslerine Başlıyoruz!

Kategori: Java Dersleri | 09.08.2013
16:05 Php Dersleri

İp Adresini Kullanarak Hava Durumu Botu Hazırlama

Kategori: Php Dersleri | 25.02.2015

Yorum Listesi (1) # YorumYap

  • göktürk sığırtmaç (18.06.2015 - 12:27:13)
    iyi güzel anlatıyorsunuzda birde anlatımın sonuna nasıl göründüğünü falan da koysanız

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.