Çoğu web sitesinde ortak olan şey nedir diye sorsalar sanırım formlar derdim. İletişim formu, geri bildirim formu diye bir çok şekilde bu örnekleri çoğaltabilirdik. Bu formu oluşturan en önemli elemanlardan birkaçı da input, select ve textarea lardır.

Web sitelerimizde kullanıcılardan bilgi almak için kullandığımız bu elementler i kimi zaman doldurması zorunlu yapıyoruz. İşte tam bu noktada CSS pseudo-class devreye giriyor ve zorunlu alanların stilini değiştirebiliyoruz.

input:required, select:required, textarea:required {
  border: 1px solid #F00;
}

Şimdi sizlere şöyle bir soru sorsam? Zorunlu olmayan alanları nasıl stillendirebilirdik? Aslında CSS ile form ve input tasarımlarını yaparken çoğumuz default olarak stilleri yazıyoruz. Ama bugün bunu yaparken ekstra bir yöntem olduğunu keşfettim:

:optional pseudo-class

Yukarıda bahsettiğim üç form input tipinde optional pseudo-class ı kullanarak stil vermek mümkün hale geliyor.

<form>
  <div class="fields">
    <label for="fullname">Full Name:</label>
    <input type="text" id="fullname" />
  </div>

  <div class="fields">
    <label for="email">Email Address:</label>
    <input type="email" id="email" required />
  </div>
</form>

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

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

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

https://codepen.io/phyesix/pen/QWxYZXw