İçerikler
Bu eğitimde, CSS ile Checkbox ve Radio butonlarının nasıl özelleştirileceğinden bahsedeceğim. Bildiğiniz gibi doğrudan CSS kullanımı ile bu alanlar özelleştirilememektedir. Özelleştirme için farklı bir yöntem kullanmak gerekiyor.
Bu alanları özelleştirmek için yapılacak mantık şu şekildedir; radio yada checkbox alanları oluşturulur. Daha sonra bu alanlar absolute ve opacity ile input alanlarını gizliyoruz. Gizlediğimiz bu alanlara da CSS ile hazırladığımız seçim bölümlerini o alanların üstüne getirip işlemi tamamlıyoruz. Aslında burada CSS ile özelleştirme yapmıyoruz. Bir nevi maskelemeyle CSS ile hazırlanan bölümü üstte, asıl HTML alanı altta tutarak hazırlamış oluyoruz. Bu işlemi aynısı FILE alanları içinde kullanılmaktadır.
Checkbox Alanlarını Özelleştirme
Birden fazla seçim alanı için yapılacak özelleştirme ile radio alanlarının özelleştirilmesi arasında çok önemli bir fark yok aslında. Birisi kare iken diğeri yuvarlak bir biçimde görünmektedir. Bu bölümde Checkbox alanlarının nasıl özelleştirileceğinden bahsedeceğim.
Checkbox için HTML Kodları
İlk olarak HTML bölümü oluşturalım. Bu bölümde checkbox HTML bölümünü, LABEL alanları ve inputların yerine geçecek olan özelleştirilebilir alanları oluşturuyoruz.
<label class="checkbox">PHP Dersleri
<input type="checkbox" checked="checked">
<span class="check"></span>
</label>
<label class="checkbox">CSS Dersleri
<input type="checkbox">
<span class="check"></span>
</label>
<label class="checkbox">JAVASCRİPT Dersleri
<input type="checkbox">
<span class="check"></span>
</label>
<label class="checkbox">HTML Dersleri
<input type="checkbox">
<span class="check"></span>
</label>
Yukarıdaki HTML bölümde dört adet seçim alanı oluşturduk. Şimdi bu alanları özelleştirilmiş gibi gösterilmesi için CSS kodlarını yazalım.
Checkbox için CSS Kodları
İlk başta da açıkladığım gibi ilk olarak tarayıcının varsayılan değerlerini gizleyip, kendi alanlarımızı oluşturacağız.
<style>
/* Temel Checkbox Ayarları */
.checkbox {
position: relative;
padding-left: 35px;
margin-right: 15px;
cursor: pointer;
font-size: 25px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Checkbox Gizliyoruz */
.checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Kendi Checkbox Alanımızı Oluşturuyoruz */
.check {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border: 1px solid #ccc;
}
/* Mouse ile Üstüne Gelince Renklendirdik */
.checkbox:hover input ~ .check {
border: 2px solid #2489C5;
}
/* Seçilince Arkaplanı Renklendirdik */
.checkbox input:checked ~ .check {
background-color: #2489C5;
border:none;
}
/* Onay Alanını Oluşturduk, Eskisini Gizledik */
.check:after {
content: "";
position: absolute;
display: none;
}
/* Onay Alanını Gösteriyoruz */
.checkbox input:checked ~ .check:after {
display: block;
}
/* Onay Bölümünü Özelleştiriyoruz */
.checkbox .check:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
Bu kodlarla birlikte özelleştirilmiş bir Checkbox alanları oluşturulmuş olacaktır. Aşağıda yer alan görselden de öncesi ve sonrası görünümlerine bakabilirsiniz.
Yukarıdaki görselde yer aldığı gibi özelleştirme işlemi başarılı bir şekilde gerçekleştirilmiş olacaktır. Renkler ve diğer ayarları CSS kodları ile oynamalar yaparak çözebilirsiniz.
Radio Alanlarını Özelleştirme
Bu bölümde de radio alanlarının nasıl özelleştirileceğinden bahsedeceğim. Bu bölümde aslında aynı mantıktadır. Tek farkı, seçim alanlarının yuvarlak bölümlerden oluşmasıdır. Bunun dışında bir farkı yoktur.
Radio için HTML Kodları
İlk olarak HTML bölümü oluşturalım. Bu bölümde radio HTML bölümünü, LABEL alanları ve inputların yerine geçecek olan özelleştirilebilir alanları oluşturuyoruz.
<label class="radio">ibrahim Çevrük <input type="radio" checked="checked" name="radio"> <span class="check"></span> </label> <label class="radio">Ömer Sercan Yücel <input type="radio" name="radio"> <span class="check"></span> </label> <label class="radio">Ceylin Çevrük <input type="radio" name="radio"> <span class="check"></span> </label> <label class="radio">Mustafa Kemal <input type="radio" name="radio"> <span class="check"></span> </label>
Yukarıdaki HTML bölümde dört adet seçim alanı oluşturduk. Şimdi bu alanları özelleştirilmiş gibi gösterilmesi için CSS kodlarını yazalım.
Radio için CSS Kodları
İlk başta da açıkladığım gibi ilk olarak tarayıcının varsayılan değerlerini gizleyip, kendi alanlarımızı oluşturacağız. Bu kadar basit.
<style>
/* Temel Radio Ayarları */
.radio {
position: relative;
padding-left: 35px;
margin-right: 15px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Varsayılan Değerleri Gizle */
.radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Yeni Radio Tanımlaması */
.radio .check {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 50%;
}
/* Mouse İle Üstün Gelince Renklendir */
.radio:hover input ~ .check {
border: 2px solid #2489C5;
}
/* Arkaplanı Renklendir */
.radio input:checked ~ .check {
background-color: #2489C5;
border:none;
}
/* Seçim alanını oluştur, eskisini gizle */
.radio .check:after {
content: "";
position: absolute;
display: none;
}
/* yenisini göster */
.radio input:checked ~ .check:after {
display: block;
}
/* Seim alanını oluştur */
.radio .check:after {
top: 8px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
</style>
Bu kodlarla birlikte özelleştirilmiş bir radio alanları oluşturulmuş olacaktır. Aşağıda yer alan görselden de öncesi ve sonrası görünümlerine bakabilirsiniz.
Yukarıdaki görselde yer aldığı gibi özelleştirme işlemi başarılı bir şekilde gerçekleştirilmiş olacaktır. Renkler ve diğer ayarları CSS kodları ile oynamalar yaparak çözebilirsiniz.
Önemli Not: Bu işlemleri gerçekleştirirken genel bir css sıfırlaması yapmadım. Çalışmalarınıza entegre ederken bazı uyuşmazlıklar olabilir. Bu uyuşmazlıkları CSS kodlarını düzenleyerek halledebilirsiniz.
