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.appearance: none; kullanılıyor.appearance: revert; kullanılıyor.revert: appearance; kullanılıyor.