Form kontrollerinin stilini belirleme

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

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

<select> öğesi

Bir <select> öğesinin varsayılan stilleri pek iyi 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 mülkünü kullanın. Seçtiğiniz oku göstermek için oku background olarak tanımlayın.

Ayrıca, font-size değerini en az 1rem olacak şekilde değiştirmelisiniz (çoğu tarayıcı için <select> öğeniz için varsayılan değer 16 pikseldir). Bunu yapmak, form denetimi odaklanıldığında iOS Safari'de sayfa yakınlaştırmasını engeller.

Elbette öğe renklerini markanızın renkleriyle eşleşecek şekilde de değiştirebilirsiniz. Boşluk, :hover ve :focus için daha fazla stil ekledikten sonra, <select> öğesinin görünümü tarayıcılar arasında tutarlıdır.

Aşağıdaki demoda görebilirsiniz. Seçeceğiniz Beğeni, 2019'a Göre Stil

<option> öğesi için durum nedir? <option> öğesi temsili CSS'nin kapsamı dışında olan değiştirilmiş öğe. Bu yazının devam ettiği sırada, <option> öğesinin stilini belirleyemezsiniz.

Onay kutuları ve Radyo düğmeleri

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

Farkı görmek için çeşitli tarayıcılarda demoyu açın. Onay kutularının ve radyo düğmelerinin markanızla eşleştiğinden ve farklı tarayıcılarda 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. Artık onay kutularına ve radyo düğmelerine sözde öğelerle stil vermek mümkün. Alternatif olarak, bu öğeler için özel stiller oluşturmak üzere aşağıdaki değiştirme tekniği 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;
}

position: absolute ürününün display: none veya visibility: hidden yerine opacity: 0 ile birlikte kullanılması önemlidir Böylece denetimler yalnızca görsel olarak gizlenir. Bu işlem, tarayıcı tarafından algılanmaya devam etmelerini erişilebilirlik ağacı. Görsel olarak gizlenmiş form denetimleri "üstte" konumda kalır karar verebilir. Bu, imleçle bu öğelerden birinin üzerine geldiğinizde bir ekran okuyucu açıkken veya ekran okuyucuların etkin olduğu dokunmatik cihazlar kullanılırken görsel olarak gizlenen kontroller Dokunarak keşfedilebilirsiniz ve ekran okuyucunun görünür odak göstergesi genellikle kontrollerin bulunduğu konumda görünür oluşturulur.

Ö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 veya satır içi SVG resimleri kullanırsınız. 

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ştiğinden emin olmanız için birçok olasılık vardır.

Daha fazla bilgi: <input type="checkbox"> ve <input type="radio"> stilinin stilini belirleme ve özel onay kutusu stillerine göz atın.

Form denetimleri için sitenizin renklerini kullanma

Site stillerinizi tek satırla form kontrollerine taşımak ister misiniz? Bunu yapmak için accent-color CSS mülkünü kullanabilirsiniz.

checkbox {
  accent-color: orange;
}

Öğrendiklerinizi sınayın

Form kontrollerine stil eklemeyle ilgili bilginizi test edin

Form kontrollerinin platforma özgü 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