Form kontrollerinin stilini belirleme

Bu modülde, form kontrollerinin stilini nasıl ayarlayacağınızı ve diğer site stillerinizi nasıl eşleştireceğinizi öğreneceksiniz.

Kullanıcıların bir seçenek belirlemesine yardımcı olma

<select> öğesi

Bir <select> öğesinin varsayılan stilleri harika görünmüyor ve görünüm tarayıcılar arasında tutarsız.

İlk olarak okları değiştirelim. 

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

Bir <select> öğesinin varsayılan oklarını kaldırmak için CSS appearance özelliğini kullanın. İstediğiniz oku göstermek için oku background olarak tanımlayın.

Ayrıca, <select> öğeniz için font-size değerini en az 1rem (çoğu tarayıcıda, varsayılan değer 16 pikseldir) olarak değiştirmeniz gerekir. Bu işlem, form denetimi odaklanıldığında iOS Safari'de sayfa yakınlaştırma/uzaklaştırma işlemini engeller.

Elbette, öğe renklerini markanızın renklerine uyacak şekilde değiştirebilirsiniz. Aralık, :hover ve :focus için daha fazla stil eklendikten sonra, <select> öğesinin görünümü artık tarayıcılar arasında tutarlıdır.

Bunu, Styling a Select Like It 2019 adlı aşağıdaki demoda görebilirsiniz:

<option> öğesine ne olacak? <option> öğesi, temsili CSS kapsamı dışında olan ve değiştirilen öğe olarak adlandırılır. Bu yazının hazırlandığı an itibarıyla <option> öğesinin stilini belirleyemezsiniz.

Onay kutuları ve radyo düğmeleri

<input type="checkbox"> ve <input type="radio">, tarayıcılar arasında farklılık gösterir.

Farkı görmek için farklı tarayıcılarda demoyu açın. Onay kutuları ve radyo düğmelerinin markanızla eşleştiğinden ve farklı tarayıcılar arasında aynı göründüğünden nasıl emin olacağınıza bakalım.

Geçmişte, geliştiriciler <input type="checkbox"> ve <input type="radio"> kontrollerinin stilini doğrudan belirleyemiyordu. Onay kutuları ve radyo düğmeleri artık sözde öğelerle biçimlendirilebilir. Bu öğeler için özel stiller oluşturmak amacıyla aşağıdaki değiştirme tekniği de kullanılabilir.

İlk olarak, varsayılan onay kutusunu ve radyo düğmesini görsel olarak gizleyin.

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

Denetimlerin yalnızca görsel olarak gizlenebilmesi için position: absolute işlevinin display: none veya visibility: hidden yerine opacity: 0 ile birlikte kullanılması önemlidir. Bu işlem, tarayıcının erişilebilirlik ağacı tarafından gösterilmeye devam etmesini sağlar. Görsel olarak gizlenen form denetimlerinin, yeni öğelerin "üzerinde" konumda kalmasını sağlamak için daha fazla stil uygulanması gerekebileceğini unutmayın. Bu şekilde, fareyle bu öğelerden birinin üzerine geldiğinizde, ekran okuyucu açıkken veya ekran okuyucusu etkinleştirilmiş dokunmatik cihazlarda kullanırken, dokunarak keşfederseniz görsel olarak gizlenen denetimler bulunabilir ve ekran okuyucunun görünür odak göstergesi genellikle kontrollerin ekranda oluşturulduğu konumda görünür.

Özel onay kutularınızı ve radyo düğmelerinizi göstermek için farklı seçenekleriniz vardır. ::before CSS sözde öğesini ve CSS background özelliğini ya da satır içi SVG resimlerini kullanabilirsiniz. 

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

CSS'de, onay kutularının ve radyo düğmelerinin marka stillerinizle eşleşmesini sağlamak için birçok olasılık vardır.

<input type="checkbox"> ve <input type="radio"> stilleri ile özel onay kutusu stilleri hakkında daha fazla bilgi edinin.

Form kontrolleri için sitenizin renkleri nasıl kullanılır?

Site stillerinizi tek satırlık kodla form kontrollerine mi getirmek istiyorsunuz? Bunun için accent-color CSS özelliğini kullanabilirsiniz.

checkbox {
  accent-color: orange;
}

Öğrendiklerinizi sınayın

Form kontrolleriyle ilgili bilginizi test etme

Form kontrollerinin platformda yerel stilini nasıl kaldırabilirsiniz?

revert: all; kullanılıyor.
Tekrar deneyin.
appearance: none; kullanılıyor.
🎉
appearance: revert; kullanılıyor.
Tekrar deneyin.
revert: appearance; kullanılıyor.
Tekrar deneyin.

Kaynaklar