Girdi Seçicileri

:required

Bu şekilde oluşturulan seçicilerle required olarak nitelenen girdi elemanları seçilir.


:optional

Bu şekilde oluşturulan seçicilerle required olarak nitelenmeyen girdi elemanları seçilir.


:disabled

Bu şekilde oluşturulan seçicilerle disabled olarak nitelenen girdi elemanları seçilir.


:enabled

Bu şekilde oluşturulan seçicilerle disabled olarak nitelenmeyen girdi elemanları seçilir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Nitelik Seçicileri</title>
<style>
input:required{
color:red;
}
input:optional{
color:blue;
}
input:enabled{
background-color:aqua;
}
input:disabled{
background-color:black;
}
</style>
</head>
<body>
    <form action="">
        İsim: <input required><br>
        Soyisim: <input><br>
        Ülke: <input disabled><br>
    </form>
</body>
</html>

Yukarıdaki örnekte required niteliği ile nitelenerek doldurulması zorunlu kılınan girdi elemanlarına yazılanların kırmızı, böyle olmayan elemanlara yazılanların mavi olacağı CSS kuralları ile belirtilmiştir. Bu nedenle "İsim" kısmına yazılanlar kırmızı "Soyisim" kısmına yazılanlar mavi olacaktır. Ayrıca disabled niteliği ile nitelenerek üzerine yazı yazılması engellenen girdi elemanlarının arkaplanının siyah, böyle olmayan girdi elemanlarının arkaplanının turkuaz olması yönünde de bir biçimlendirme yapılmıştır. Bu nedenl "İsim" ve "Soyisim" kutularının arkaplanı turkuaz "Ülke" kutusunun arkaplanı siyah olacaktır.


:checked

Bu şekilde oluşturulan seçiciler kullanıcı tarafından seçilen kutucukları seçmeye yarar.


:focus

Bu şekilde oluşturulan seçiciler odaklanılan girdi elemanını seçmeye yarar.

<!DOCTYPE html>
<html>
<head>
<title>CSS Nitelik Seçicileri</title>
<style>
input:checked{
width:20px;
height:20px;
}
input:focus{
background-color:lightgray;
}

</style>
</head>
<body>
    <form action="">
        Odaklanılacak Kutu: <input><br>
        <input type=checkbox> Kutucuk 1<br>
        <input type=checkbox> Kutucuk 2<br>
    </form>
</body>
</html>

Yukarıdaki örnekte kutucukların işaretlenmesi durumunda boyutlarını değiştirecek, metin kutusuna odaklanıldığında da kutunun arkaplan rengini değiştirecek bir biçimlendirme yapılmıştır.


:read-only

Bu şekilde oluşturulan seçicilerle read-only olarak nitelenen girdi elemanları seçilir. Bu seçici Internet Explorer tarafından desteklenmemektedir. Mozilla Firefox tarafından ise bu seçici yerine :-moz-read-only seçicisi kullanılmaktadır.


:read-write

Bu şekilde oluşturulan seçicilerle read-only olarak nitelenmeyen girdi elemanları seçilir.  Bu seçici Internet Explorer tarafından desteklenmemektedir. Mozilla Firefox tarafından ise bu seçici yerine :-moz-read-write seçicisi kullanılmaktadır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Nitelik Seçicileri</title>
<style>
input:read-only{
background-color:lightgray;
}
input:-moz-read-only{
background-color:lightgray;
}
input:read-write{
background-color:yellow;
}
input:-moz-read-write{
background-color:yellow;
}
</style>
</head>
<body>
    <form action="">
        Salt okunur kutu: <input readonly><br>
        Yazılabilir kutu: <input><br>
    </form>
</body>
</html>

:valid

Bu şekilde oluşturulan seçicilerle uygun bir değer girilmiş girdi elemanları seçilir.


:invalid

Bu şekilde oluşturulan seçicilerle uygun olmayan bir değer girilmiş girdi elemanları seçilir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Nitelik Seçicileri</title>
<style>
input[type=number]:valid{
color:green;
}
input[type=number]:invalid{
color:red;
}

</style>
</head>
<body>
    <form action="">
        <input type="number" step="5" ><br>
    </form>
</body>
</html>

Yukarıdaki örnekteki girdi kutusuna uygun değerler beşin katlarıdır. Bu kutuya girilen uygun değerlerin yeşil, uygun olmayan değerlerin kırmızı olarak gösterilmesi istenmiştir. Ayrıca biçimlendirmeler sadece number tipindeki girdi elemanlarına uygulanacak şekilde oluşturulmuştur.


:in-range

Bu şekilde oluşturulan seçicilerle uygun aralıkta değer girilmiş olan girdi elemanları seçilir.


:out-of-range

Bu şekilde oluşturulan seçicilerle uygun aralıkta olmayan değer girilmiş olan girdi elemanları seçilir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Nitelik Seçicileri</title>
<style>
input[type=number]:in-range{
color:green;
}
input[type=number]:out-of-range{
color:red;
}

</style>
</head>
<body>
    <form action="">
        <input type="number" min="5" max=10 ><br>
    </form>
</body>
</html>

Yukarıdaki örnekte girdi kutusuna girilebilecek aralık 5 ile 10 arası olarak tanımlanmıştır. Bu aralıkta değerler girildiğinde yazı rengi yeşil, aksi durumda yazı rengi kırmızı olacaktır.