Form Girişleri ve Metin Alanları için Özel CSS Stilleri

En iyi tarayıcılarda neredeyse aynı görünüme sahip özel form girişi ve metin alanı stilleri oluşturacağız. Giriş türlerini özel olarak biçimlendireceğiz text, dateve fileve stil readonly ve disabled devletler.

Nasıl yapılacağını öğrenmek için okumaya devam edin:

• giriş stillerini sıfırla
• kullanmak hsl giriş durumlarının teması için
• tüm durumların kontrast gereksinimlerini karşıladığından emin olun
• algılanabilir tutmak :focus Windows Yüksek Karşıtlık modu için durum

Şimdi uygun: benim yumurta kafalı video kursum Erişilebilir Çapraz Tarayıcı CSS Form Stili. Bu öğreticide açıklanan teknikleri, projeleriniz arasında genişletmek için temaya uygun bir form tasarım sistemi oluşturarak bir sonraki seviyeye taşımayı öğreneceksiniz.

Bu, Modern CSS form alanı mini serisinin dördüncü bölümüdür. Aşağıdakiler de dahil olmak üzere diğer yaygın form alanı türlerinin nasıl stillendirileceğini öğrenmek için 18-20. bölümlere göz atın. radyo düğmeleri, onay kutularıve seçer.

Metin giriş stilleri arasında radyolarda, onay kutularında ve seçimlerde gördüğümüzden biraz daha fazla eşitlik var, ancak yine de tutarsızlıklar var.

İşte bugün Chrome, Safari ve Firefox’ta (soldan) ele alacağımız stilsiz girdilerin bir ekran görüntüsü.

Tarayıcılar ve ortak alan türleri arasında ilk görünümü birleştirmeye çalışacağız.

bu date alan, Chrome ve Firefox’un biçimlendirme ve aralarından seçim yapabileceğiniz açılır bir takvim sağlaması bakımından benzersizdir, Safari ise karşılaştırılabilir bir işlevsellik sunmaz. Bunu CSS’de de oluşturamıyoruz, bu yüzden buradaki amacımız benzer bir başlangıç ​​görünümü oluşturarak olabildiğince ileri gitmek. Kontrol et tarih/saat girişleri için caniuse.

Birçok alan türünü ele alıyoruz, bu nedenle tam liste için CodePen’e bakın. Ancak burada bir metin girişi ve bir metin alanı için temel HTML’dir.

<label for="text-input">Text Input</label>
<input class="input" id="text-input" type="text" />
<label for="textarea">Textarea</label>
<textarea class="input" id="textarea"></textarea>

Stillerimizi basitleştirmeye ve kademeli çalışmaya hazırlanmaya izin vermek için yalnızca bir CSS sınıfı ekledik – input – doğrudan metin girişi ve metin alanına yerleştirilir.

Etiket, stil uygulamamızın bir parçası değildir, ancak genel bir gereklilik olarak dahil edilmiştir, özellikle for değerine sahip nitelik id giriş üzerinde.

Öğretici için, kullanarak tema oluşturmak için biraz farklı bir teknik deneyeceğiz. hsl değerler.

Kenarlık için bir gri ayarlayacağız ve ardından bizim için kullanılacak mavi bir rengi parçalayacağız. :focus dahil olmak üzere hsl değerlerini belirtin: h “renk” için, s “doygunluk” için ve l “hafiflik” için.

:root {
--input-border: #8b8a8b;
--input-focus-h: 245;
--input-focus-s: 100%;
--input-focus-l: 42%;
}

Form alanlarımıza yönelik öğreticilerin her biri, yalnızca formların ötesinde çıkarılabilen ve kullanılabilen tema oluşturma için biraz farklı bir yöntem içeriyor!

Tüm kullanıcı arabirimi öğelerine göre, giriş sınırının sahip olması gerekir en azından Çevresine karşı 3:1 kontrast.

Ve :focus devletin, aşağıdakilere karşı 3: 1 kontrasta sahip olması gerekir. odaklanmamış sınır rengini değiştirmek gibi bir şey içeriyorsa belirtin veyagöre WCAG 2.2 taslağıdaha büyük veya eşit bir kalınlık 2px.

WCAG 2.2 taslağı bazı küçük ayarlamalar yapar :focus gereksinimleri ve bunları gözden geçirmenizi tavsiye ederim.

Modern bir en iyi uygulama olarak tüm eğitimlerimde yer aldığı gibi, önce aşağıdaki sıfırlamayı ekliyoruz:

*,
*::before,
*::after {
box-sizing: border-box;
}

Tarayıcılardaki alanların ilk durumunda görüldüğü gibi, kenarlık türü, arka plan rengi ve yazı tipi özelliklerinde bazı göze çarpan farklılıklar vardı.

İlginçtir, font-size ve font-family tipografi öğelerinin yaptığı gibi belgeden miras almayın, bu nedenle bunları sıfırlamamızın bir parçası olarak açıkça ayarlamamız gerekir.

Ayrıca not, bir giriş font-size mobil Safari’de etkileşim üzerine yakınlaştırmanın tetiklenmesini önlemek için en az 16 piksel olarak hesaplanmalıdır. tipik olarak varsayabiliriz 1rem eşittir 16pxancak bunu açıkça bir geri dönüş olarak ayarlayacağız ve ardından daha yeni CSS işlevini kullanacağız. max kurmak 16px küçük olması durumunda minimum olarak 1em (h/t için Dan Burzo Bu fikir için).

.input {
font-size: 16px;
font-size: max(16px, 1em);
font-family: inherit;
padding: 0.25em 0.5em;
background-color: #fff;
border: 2px solid var(--input-border);
border-radius: 4px;
}

biz border tema değişkenini kullanmak ve ayrıca biraz yuvarlatılmış bir köşe oluşturmak için.

Bu güncellemeden sonra zaten oldukça iyi görünüyoruz:

Bu ekran görüntüsünde fark etmek zor olabilir, ancak başka bir fark, her alanın yüksekliğidir. Bu farkı daha iyi görmek için metin girişinin dosya girişiyle karşılaştırması:

Bunu bizim için uyguladığımız aşağıdakilerle ele alalım: .input bir sınıfa yerleştirilmediği sürece textarea:

.input:not(textarea) {
line-height: 1;
height: 2.25rem;
}

dahil ettik line-height: 1 olmadığı zamandan beri textarea bir girdinin çok satırlı olması imkansızdır. Boyumuzu da ayarladık rem özellikle dosya giriş türüyle ilgili hususlar nedeniyle. Bir dosya giriş türü kullanmayacağınızı biliyorsanız, kullanabilirsiniz. em burada bunun yerine çeşitli büyüklükte girdiler oluşturma esnekliği için.

Ancak kritik olarak, düzenlenebilir ve düzenlenebilir arasındaki farkı kaybettik. disabled giriş türleri. Biz de tanımlamak istiyoruz readonly ayrıca düzenlenemez, ancak yine de etkileşimli olduğuna dair bir ipucu ile. Ve dosya giriş türünü düzeltmek için biraz daha işimiz var. Ve temamızı oluşturmak istiyoruz :focus durum.

Chrome, Safari ve Firefox’ta yalnızca dosya girişimize bir kez daha bakalım:

Tarayıcı tarafından oluşturulan düğmenin stilini veya komut metnini değiştiremiyoruz, ancak şimdiye kadar sağladığımız sıfırlama, özel yazı tipimizin kullanılmasına izin vermek için biraz iş yaptı.

Yazı tipini biraz küçültmek için bir ayar daha yapacağız, çünkü diğer alan türleriyle bakıldığında devralınan düğme oldukça büyük görünüyor ve font-size ele almak için geriye kalan tek seçeneğimiz. Bunu yaptıktan sonra, dolgumuzu temel alacak şekilde ayarladığımız için üst dolguyu ayarlamamız gerekiyor. em.

input[type="file"] {
font-size: 0.9em;
padding-top: 0.35rem;
}

Daha meraklı bir çözüm bekliyorsanız, bunları ele alan birçok tilki var. Buradaki amacım, size daha sonra inşa edebileceğiniz bir temel sağlamaktı.

Sık kullanılmamakla birlikte, readonly öznitelik, değer seçilebilmesine ve yardımcı teknoloji tarafından keşfedilmesine rağmen ek kullanıcı girişini önler.

Bu alanın esasen önceden girilmiş bir değer için bir yer tutucu olduğuna dair daha fazla ipucu sağlamak için bazı stiller ekleyelim.

Bunu yapmak için, herhangi birini hedefleyeceğiz .input bu da sahip [readonly] nitelik. Nitelik seçiciler, geniş uygulama alanına sahip çok kullanışlı bir yöntemdir ve CSS araç kutunuza kesinlikle eklemeye (veya farkındalığınızı güncellemeye) değer.

.input[readonly] {
border-style: dotted;
cursor: not-allowed;
color: #777;
}

ile takas etmenin yanı sıra dotted sınır, biz de atadık not-allowed imleç ve orta-gri bir metin rengi zorladı.

Aşağıdaki gif’te görüldüğü gibi, kullanıcı değeri vurgulamak/kopyalamak dışında alanla etkileşime giremez.

Benzer readonly, devre dışı bırakılan alanların stilini güncellemek için bir öznitelik seçici kullanacağız. biz onu ekliyoruz .input sınıf, bu nedenle diğer girdi türlerimizin yanı sıra textareas için de geçerlidir.

Kenarlık rengini sessiz griye ve alan arka planını çok açık griye güncellemek için CSS değişkenimizi kullanacağız. Ayrıca tekrar uygulayacağız not-allowed imleci, alanın etkileşimli olmadığına dair fazladan bir ipucu olarak kullanın.

.input[disabled] {
--input-border: #ccc;
background-color: #eee;
cursor: not-allowed;
}

Ve işte hem metin girişi hem de metin alanı için sonuç:

Erişilebilirlik Notu: disabled alanlar, odaklanılabilir olmadıkları için yardımcı teknoloji tarafından mutlaka keşfedilebilir değildir. Ayrıca, kullanıcı arabirimi öğeleri için tipik 3:1 kontrast eşiğini bile karşılamaları gerekmez, ancak bunları gri tonlarına ayarlayarak kullanıcı beklentilerini tuttuk.

Bizim textarea gerçekten yakın, ancak textareas’ın doğal davranışına özgü olduğu için bahsetmek istediğim bir özellik var.

Bu mülk resizehangi yöne gideceğinizi belirlemenizi sağlar. textarea yeniden boyutlandırılabilir veya hiç olabilir.

kesinlikle izin vermelisin ama textarea genel koşullar altında yeniden boyutlandırma işlevini korumak için, örneğin, bir kullanıcının gerçekten geniş bir şekilde sürüklemesi nedeniyle mizanpajın bozulmasını önlemek için onu yalnızca dikey yeniden boyutlandırmayla sınırlayabilirsiniz.

Kapsamımızı belirleyerek bu özelliği uygulayacağız. .input sınıfa uygulandığında textarea:

textarea.input {
resize: vertical;
}

Son CodePen demosunda deneyin!

Tamam, girdilerimiz ve textarea için başlangıç ​​stillerini tamamladık, ancak çok önemli bir durumu ele almamız gerekiyor: :focus.

Kenarlık rengini, odaklanmamış duruma karşı 3:1 kontrastı karşılayan bir değere değiştiren bir birleşik efekt için gideceğiz, ama aynı zamanda bir box-shadow biraz ekstra vurgulama için.

İşte bu yüzden odak durumunun tema rengini hsl’de tanımladık: bu, sadece açıklık değerini güncelleyerek kenarlık renginin bir varyantını oluşturabileceğimiz anlamına gelir.

İlk olarak, bireysel CSS değişken değerlerinden tam hsl değerini oluşturarak kenarlık rengini tanımlarız:

.input:focus {
border-color: hsl(var(--input-focus-h), var(--input-focus-s), var(--input-focus-l));
}

Daha sonra içerisine ekliyoruz box-shadow Bu, esasen çift kenarlık efekti oluşturmak için yalnızca bulanıklığı kullanır. calc() içinde kullanmak kabul edilebilir hslabu yüzden orijinal değeri %40 oranında hafifletmek için kullanıyoruz ve ayrıca biraz alfa şeffaflığına izin veriyoruz:

.input:focus {
box-shadow: 0 0 0 3px hsla(var(--input-focus-h), var(--input-focus-s), calc(var(--input-focus-l) +
40%), 0.8);
}

Kontrastımız için şimdi yeni bir bağlam eklediğimizi unutmayın; :focus sınır vs. :focus box-shadowbu nedenle, bu yöntemi kullanıyorsanız seçtiğiniz renkler için hesaplanan farkın en az 3:1 olduğundan emin olun.

İsteğe bağlı olarak, geri atlayın .input kural ve bir ekleyin transition canlandırmak box-shadow:

.input {
transition: 180ms box-shadow ease-in-out;
}

Son olarak, Windows Yüksek Karşıtlık modunu da unutmak istemiyoruz. box-shadow veya kenarlık renk değişikliğini algılayabilir. Bu nedenle, bu kullanıcılar için şeffaf bir anahat ekliyoruz:

.input:focus {
outline: 3px solid transparent;
}

Bu tekniği bölüm kapsayan bölümde de kullanıyoruz. düğme stilleri.

İşte metin girişine odaklanmanın bir gif demosu:

Ve işte görünüm readonly alanı farklı olduğundan border-style:

CodePen HTML’de, bir hata durumu gibi güncellenmiş bir görseli tanımlamak için satır içi stil kullanma örneğini içeren bir yorum vardır. Yine, unutmayın ki biz aydınlatma sağlanan --input-focus-l değeri %40, ve odaklanan kenarlık rengi, odaklanmamış renge karşı en az 3:1 kontrast olmalıdır, bu nedenle CSS değişken değerlerini değiştirirken bunu göz önünde bulundurun.

Doğru giriş türünü (ör. e-posta) kullanmanın yanı sıra, özellikle mobil cihazlarda kullanıcı deneyimini iyileştirmeye yardımcı olabilecek iki ek özellik vardır.

Bunlardan ilki, inputmodebeklenen verilerle daha iyi eşleşen değiştirilmiş bir klavye veya tuş takımı sağlar. mevcut hakkında okuyun inputmode MDN’deki değerler >

ikincisi autocomplete olduğundan çok daha fazla seçeneğe sahip olan on veya off. Örneğin, iPhone’da Google bana metin yoluyla bir onay kodu gönderdiğinde klavyenin bu değerin ne olduğunu “sadece bildiğini” her zaman takdir ediyorum. Görünüşe göre, bu sayesinde autocomplete="one-time-code"!

tam listesine göz atın autocomplete değerler bu, beklenen değer hakkında ipucu vermenize ve otomatik doldurma değerlerinden yararlanan kullanıcılar için formlarınızın kullanıcı deneyimini gerçekten artırmanıza olanak tanır.

İlk olarak, Chrome, Safari ve Firefox’ta (soldan) çözümümüze son bir bakış. Dosya girişi, yan yana görüntülendiğinde hala biraz dışarı çıkıyor, ancak tek bir tarayıcıda bir form akışında kesinlikle kabul edilebilir.

Temsil ettiğimiz tüm alan türleri ile çözüm burada.

Stephanie Eckles (@5t3ph)