Form Elementlerinin Özel Seçicileri
Form elementlerinin özel seçicileri, CSS ile form elemanlarını özelleştirmek için kullanılan yapılardır. Bu seçiciler "form" elemanlarından input, select ve textarea elementleri için ortak olarak bulunmaktadırlar.
1) CSS ":checked" seçicisi nedir?
":checked" seçicisi, bir form elemanının seçili (checked) durumunu hedef alır. Özellikle checkbox ve radio button gibi input elemanlarında kullanılır.
<form action="">
<input type="radio" checked="checked" value="male" name="gender"> Male<br>
<input type="radio" value="female" name="gender"> Female<br>
<input type="checkbox" checked="checked" value="Bike"> I have a bike<br>
<input type="checkbox" value="Car"> I have a car
</form>input:checked {
height: 50px;
width: 50px;
}Yukarıdaki örnekte "type" değeri "radio" ve "checkbox" olan elementlerin checked (seçilme) özelliklerine CSS ile müdahale edilmiştir.
2) CSS ":default" seçicisi nedir?
":default" seçicisi, bir form elemanının varsayılan (default) değerini hedef alır. Genellikle input elemanları için kullanılır.
<form action="">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>input:default {
box-shadow: 0 0 1px 1px red;
}Yukarıdaki örnekte, "input" elementinin "checked" attribute değerine başlangıçta sahip olan için özel bir CSS yazılmıştır.
3) CSS ":disabled" seçicisi nedir?
":disabled" seçicisi, bir form elemanının devre dışı bırakılmış (disabled) durumunu hedef alır. Bu elemanlar kullanıcı etkileşimine kapalıdır. Genellikle sunucular tarafından "enabled" veya "disabled" değerleri atanmaktadır.
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" disabled="disabled" value="Disneyland">
</form>input[type=text]:enabled {
background: #ffff00;
}
input[type=text]:disabled {
background: #dddddd;
}Yukarıdaki örnekte "disabled" değeri olan element için özel bir CSS yazılmıştır.
4) CSS ":enabled" seçicisi nedir?
":enabled" seçicisi, bir form elemanının etkin (enabled) durumunu hedef alır. Bu elemanlar kullanıcı etkileşimine açıktır. ":disabled" durumunun tersi yani "input" elementlerinin "default" olarak sahip olduğu değerin kendisidir.
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" disabled="disabled" value="Disneyland">
</form>input[type=text]:enabled {
background: #ffff00;
}
input[type=text]:disabled {
background: #dddddd;
}Yukarıdaki örnekte "disabled" attribute değerine sahip olmayan "input" elementleri ":enabled" CSS değerinden etkilenmiştir.
5) CSS ":focus" seçicisi nedir?
":focus" seçicisi, bir form elemanının odaklanılmış (focused) durumunu hedef alır. Kullanıcı bu elemana odaklandığında aktif olur. İlgili form
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>input:focus {
background-color: yellow;
}Yukarıdaki örnekte, "input" elementlerine tıklanılması durumunda oluşan ":focus" özelliğine erişim sağlanılmıştır.
6) CSS ":indeterminate" seçicisi nedir?
":indeterminate" seçicisi, bir form elemanının belirsiz (indeterminate) durumunu hedef alır. Özellikle checkbox elemanları için kullanılır.
<form> <input type="checkbox" id="myCheckbox"> Checkbox </form>// Make the checkbox indeterminate via JavaScript
var checkbox = document.getElementById("myCheckbox");
checkbox.indeterminate = true;input:indeterminate {
box-shadow: 0 0 1px 1px red;
}Yukarıdaki örnekte, JavaScript ile elementin ID değeri üzerinden bir erişim işlemi gerçekleştirilmiştir. Daha sonrasında ise "indeterminite (belirsiz)" özelliği aktif hâle getirilmiştir. Daha sonrasında ise CSS ile erişim sağlanarak kullanılmıştır. Genellikle sunucu taraflı validayonlarda kullanılabilir.
7) CSS ":valid" seçicisi nedir?
":valid" seçicisi, bir form elemanının belirtilen türde olması gerekmektedir. Bu durum genellikle input validasyonunda kullanılır.
<input type="email" value="support@example.com">input:valid {
background-color: yellow;
}Yukarıdaki örnekte "input" elementinin "type" değeri "email" olarak ayarlandığından, input input elementinin içerisine geçerli bir "email" adresi girilmediği zaman seçim işlemi yapılmaz! Geçerli bir E-mail adresi girildiğinde seçim yapılır.
8) CSS ":invalid" seçicisi nedir?
":invalid" seçicisi, bir form elemanının geçersiz (invalid) bir değere sahip olduğunu hedef alır. Bu durum genellikle input validasyonunda kullanılır. "valid" durumunun tam tersi olarakta görülebilir.
<input type="email" value="support@example.com">input:invalid {
background-color: yellow;
}Yukarıdaki input elementinin "type" özelliğinin "E-mail" olması nedeniyle, geçersiz E-mail değeri girilmesi durumunda seçim işlemi yapılacaktır. ":valid" işleminin tam tersini temsil eder.
9) CSS ":optional" seçicisi nedir?
":optional" seçicisi, bir form elemanının "required" niteliği olmayan (optional) durumunu hedef alır. Bu elemanlar kullanıcı tarafından doldurulması isteğe bağlıdır. Diğer bir ifade ile "required" doldurulması zorunlu olmayan form elemanları için kullanılmaktadır.
<p> Zorunlu olmayan input: <br><input></p>
<p>Zorunlu olan element: <br><input required></p>input:optional {
background-color: yellow;
}Yukarıdaki örnekte, input elementlerinden "required" olmayanı seçmektedir.
10) CSS ":in-range" seçicisi nedir?
":in-range" seçicisi, bir form elemanının belirli bir değer aralığında olduğunu hedef alır. Özellikle input[type="range"] gibi elemanlar için kullanılır.
<input type="number" min="5" max="10" value="7">input:in-range {
border: 2px solid yellow;
}Yukarıdaki örnekte, oluşturulan input elementinin "min" veya "max" değer aralığının içinde bir değer girilirse CSS "in-range" selector yapısı o elementi seçecektir. Aralığın dışında bir sayı girildiğinde ise bu durumda o element seçilmeyecektir.
11) CSS ":out-of-range" seçicisi nedir?
":out-of-range" seçicisi, bir form elemanının belirli bir değer aralığının dışında olduğunu hedef alır. Özellikle input[type="range"] gibi elemanlar için kullanılır. Kısacası ":in-range" yapısının tam olarak zıttıdır.
<input type="number" min="5" max="10" value="17">input:out-of-range {
border: 2px solid red;
}Yukarıdaki örnekte değerin 5 ile 10 arasında olması beklenirken 17 değeri girildiğinden kaynaklı olarak ":out-of-range" CSS özelliği, o elementi başarılı bir şekilde seçmiştir.
12) CSS ":read-only" seçicisi nedir?
":read-only" seçicisi, bir form elemanının sadece okunabilir (read-only) durumunu hedef alır. Kullanıcı bu elemanı düzenleyemez.
<p>Normal input elementi: <br><input value="hello"></p>
<p>Readonly olan input elementi<br><input readonly value="hello"></p>input:read-only {
background-color: yellow;
}Yukarıdaki örnekte input elementinin "readonly (Sadece oku)" özelliği aktif olan element seçilmiştir.
13) CSS ":read-write" seçicisi nedir?
":read-write" seçicisi, bir form elemanının düzenlenebilir (read-write) durumunu hedef alır. Kısaca "readonly" değeri bulunanı değil, bulunmayanı seçer.
<p>Normal input elementi: <br><input value="hello"></p>
<p>Readonly olan input elementi<br><input readonly value="hello"></p>input:read-write {
background-color: yellow;
}Yukarıdaki örnekte :readonly özelliği bulunmayan input elementi seçilmiştir.
14) CSS ":required" seçicisi nedir?
":required" seçicisi, bir form elemanının "required" niteliği belirtilmiş (required) durumunu hedef alır. Bu elemanlar kullanıcı tarafından doldurulması zorunludur. Boş değer
<p>An optional input element:<br><input></p>
<p>A required input element:<br><input required></p>input:required {
background-color: yellow;
}Yukarıdaki örnekte, required (Zorunlu) özeliği bulunan element seçilmektedir.
CSS'te bulunan diğer seçim türlerini görüntülemek için CSS'te Seçim Yöntemleri isimli ana yazımıza bakmanızı tavsiye etmekteyiz.