CSS Dersleri 29 - Form Elemanlarıyla İlişkili Sözde Sınıflar

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Form Elemanlarıyla İlişkili Sözde Sınıfları öğreneceğiz.

:focus Sözde Sınıfı

CSS'deki :focus sözde sınıfı, o anda klavye tarafından hedeflenen veya fare tarafından etkinleştirilen bir öğenin stilini belirlemek için kullanılır.

<input class="kirmizi-input" value="Odaklandığımda kırmızı olacağım"><br>
<input class="mavi-input" value="Odaklandığımda mavi olacağım.">

.kirmizi-input:focus {
  background: yellow;
  color: red;
}

.mavi-input:focus {
  background: yellow;
  color: blue;
}

:enabled Sözde Sınıfı

CSS'de :enabled sözde sınıfı, devre dışı bırakılmayan ve dolayısıyla etkinleştirilen odaklanabilir etiketleri seçer. Yalnızca form etiketleriyle ilişkilidir (input, select, textarea). Etkin etiketler arasında seçebileceğiniz, içine veri girebileceğiniz veya odaklanabileceğiniz veya tıklayabileceğiniz etiketler bulunur.

<form action="#">
  <label for="ilkAlan">İlk Alan (enabled):</label>
  <input type="text" id="ilkAlan" value="Test"><br>

  <label for="ikinciAlan">İkinci Alan (disabled):</label>
  <input type="text" id="ikinciAlan" value="Ornek" disabled="disabled"><br>

  <input type="button" value="Gönder">
</form>

input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}

:disabled Sözde Sınıfı

CSS'de :disabled sözde sınıf seçici, etiketler disabled özelliğine sahip olduğunda kullanıcı girdisini alabilen HTML öğelerine koşullu stil sağlar.

<form action="#">
  <label for="ilkAlan">İlk Alan (enabled):</label>
  <input type="text" id="ilkAlan" value="Test"><br>

  <label for="ikinciAlan">İkinci Alan (disabled):</label>
  <input type="text" id="ikinciAlan" value="Ornek" disabled="disabled"><br>

  <input type="button" value="Gönder">
</form>

input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}

:checked Sözde Sınıfı

CSS'de :checked sözde sınıfı, etiketler seçili durumdayken seçer. Yalnızca radyo ve onay kutusu türündeki giriş (input) öğeleriyle ilişkilidir. :checked sözde sınıf seçici, işaretlendiğinde veya açık duruma geçtiğinde radyo ve onay kutusu giriş türleriyle eşleşir. Seçilmezler veya kontrol edilmezlerse, eşleşme yoktur.

<input type="checkbox" id="test" name="Kodlama Vakti"> 
<label for="test">Kodlama Vakti ile CSS Öğreniyorum.</label>

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}

:optional Sözde Sınıfı

CSS'de :optional sözde sınıf, özellikle gerektiği gibi ayarlanmayan (gerekli özniteliğe sahip olmayan) girdileri (select etiketi dahil) hedefler.

Bu sözde sınıf, bir form göndermek için gerekli olmayan alanların stilini belirlemek için kullanışlıdır.

<form>
  <div class="alan">
    <label for="url_input">Lütfen URL Adresi Giriniz:</label>
    <input type="url" id="url_input">
  </div>

  <div class="alan">
    <label for="email_input">Lütfen E-posta Adresi Giriniz :</label>
    <input type="email" id="email_input" required>
  </div>
</form>

label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.alan{
  margin: 1px;
  padding: 1px;
}

input:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}

:read-only Sözde Sınıfı

CSS'de :read-only sözde sınıfı, kullanıcı tarafından düzenlenemeyen bir etiketi (input veya textarea gibi) temsil eder.

<form action="#">
  <label for="ilkAlan">İlk Alan (readonly):</label>
  <input type="text" id="ilkAlan" value="Test" readonly><br>
  <input type="button" value="Gönder">
</form>

<p>CSS'de :read-only sözde sınıfı, kullanıcı tarafından düzenlenemeyen bir etiketi (input veya textarea gibi) temsil eder.</p>

input:read-only, textarea:read-only {
  background-color: #ccc;
}

p:read-only {
  background-color: #ccc;
}

:read-write Sözde Sınıfı

CSS'de :read-write  sözde sınıfı, kullanıcı tarafından düzenlenebilir bir öğeyi (input veya textarea gibi) temsil eder.

<p contenteditable>Bu paragraf düzenlenebilirdir.</p>

<p>Bu paragraf düzenlenemezdir. "read-only"</p>

p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}

:valid ve :invalid Sözde Sınıfları

CSS'de :valid sözde sınıfı, içeriği başarıyla doğrulanan herhangi bir input veya diğer form etiketini temsil eder. Bu, geçerli alanların(required), kullanıcının verilerinin doğru şekilde biçimlendirildiğini onaylamasına yardımcı olan bir görünümü kolayca benimsemesini sağlar.

CSS'de :invalid sözde sınıfı, içeriği doğrulanamayan herhangi bir input veya diğer form etiketlerini temsil eder.

<label for="email">E-Posta:</label>
<input type="email" id="email" name="email" />

<label for="emailRequired">E-posta (required):</label>
<input type="email" id="emailRequired" name="emailRequired" required />

<form action="#">
  <label id="guess">1 ile 9 arasında sayı giriniz:</label>
  <input type="text" id="guess" name="guess" pattern="[1-9]{1}" required />
</form>

input:invalid {
  background: hsla(0, 90%, 70%, 1);
}

input:valid {
  background: hsla(100, 90%, 70%, 1);
}


body {
  padding: 3em;
}

label {
  display: block;
}

input {
  padding: 0.25em 0;
  margin-bottom: 0.75em;
}

:required Sözde Sınıfı

CSS'de :required sözde sınıf seçici, yazarların gerekli özniteliğe sahip herhangi bir eşleşen öğeyi seçmesine ve stilize etmesine olanak tanır. Formlar, form gönderilmeden önce hangi alanların geçerli verilere sahip olması gerektiğini kolayca gösterebilir.

<form>
  <div class="alan">
    <label for="url_input">Lütfen URL Adresi Giriniz:</label>
    <input type="url" id="url_input">
  </div>

  <div class="alan">
    <label for="email_input">Lütfen E-posta Adresi Giriniz :</label>
    <input type="email" id="email_input" required>
  </div>
</form>

label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.alan{
  margin: 1px;
  padding: 1px;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

:out-of-range ve :in-of-range Sözde Sınıfı

CSS'de :out-of-range sözde sınıfı, geçerli değeri min ve max öznitelikleri tarafından belirtilen aralık sınırlarının dışında olan bir input etiketini temsil eder.

CSS'de :in-of-range sözde sınıfı, geçerli değeri min ve max öznitelikleri tarafından belirtilen aralık sınırları içinde olan bir input etiketini temsil eder.

<form>
    <div>1 ve 10 arasındaki sayılar geçerli "valid" durumdadır.</div>
    <div>
        <input id="value1" name="value1" type="number" min="1" max="10" value="12" required>
    </div>
</form>

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}