CSS

Saf CSS ile Özel Seçim Stilleri

Modern CSS, tekli, çoklu ve devre dışı için neredeyse aynı ilk görünüme sahip özel seçim stilleri elde etmek için bize bir dizi özellik sunar. select en iyi tarayıcılardaki öğeler.

Çözümümüzün kullanacağı birkaç özellik ve teknik:

  • clip-path özel açılır oku oluşturmak için
  • Yerel seçim ve oku hizalamak için CSS ızgara düzeni
  • esnek stil için özel CSS değişkenleri
  • em göreceli boyutlandırma birimleri

Ş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.

Yerel Seçimlerle İlgili Sık Karşılaşılan Sorunlar

Tüm form alanı türlerinde olduğu gibi, <select> ilk görünümünde tarayıcılar arasında farklılık gösterir.

Soldan sağa, işte ilk görünüm <select> Firefox, Chrome ve Safari’de:

özel stil olmadan ilk yerel seçim görünümü

Farklar, kutu boyutunu, yazı tipi boyutunu, satır yüksekliğini içerir ve en göze çarpan, açılır göstergenin stilindeki farktır.

Amacımız, birden çok seçim ve devre dışı durum dahil olmak üzere bu tarayıcılarda aynı ilk görünümü oluşturmaktır.

Not: Açılır liste hala stile uygun değildir, bu nedenle bir kez <select> açıldığında, yine de bireysel tarayıcının stillerini seçecektir. option liste. Bu sorun değil – yerel bir seçimin ücretsiz erişilebilirliğini korumak için bununla ilgilenebiliriz!

Tek bir şeye odaklanacağız <select> başlamak.

<label for="standard-select">Standard Select</label>
<div class="select">
<select id="standard-select">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
<option value="Option 5">Option 5</option>
<option value="Option length">
Option that has too long of a value to fit
</option>
</select>
</div>

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 üzerinde <select>.

Özel stillerimizi gerçekleştirmek için yerel seçimi class of ile fazladan bir div içine sardık. select Bu eğitimde basitlik için.

Devralınan Stilleri Sıfırla ve Kaldır

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;
}

Bunu takiben, yerli için kuralı başlatabiliriz. select ve görünümünü dinlendirmek için aşağıdakileri uygulayın:

select {
appearance: none;
background-color: transparent;
border: none;
padding: 0 1em 0 0;
margin: 0;
width: 100%;
font-family: inherit;
font-size: inherit;
cursor: inherit;
line-height: inherit;
}

Bunların çoğu muhtemelen tanıdık olsa da, garip olan şey appearance. Bu nadiren kullanılan bir özelliktir ve tam olarak istediğimiz yerde olmadığını fark edeceksiniz. destekancak bu durumda bizim için öncelikli olarak sağladığı şey, yerel tarayıcı açılır okunun kaldırılmasıdır.

Not: CodePen kullanmak üzere ayarlanmıştır. otomatik ön ek gerekli önceden sabitlenmiş sürümlerini ekleyecektir. appearance Emlak. Bunu projeniz için özel olarak ayarlamanız veya manuel olarak eklemeniz gerekebilir. Benim HTML / Sass Hızlı Başlangıç üretim yapısının bir parçası olarak otomatik ön ek içerir.

İyi haber şu ki, gerekirse daha düşük IE sürümleri için okun kaldırılmasını sağlamak için bir kural daha ekleyebiliriz:

select::-ms-expand {
display: none;
}

Bu ipucu, aşağıdakileri gösteren Filament Group’un mükemmel makalesinde bulundu: seçili stiller oluşturmak için alternatif bir yöntem.

Son kısım, varsayılanı kaldırmaktır outline. Endişelenme – daha sonra yerine yenisini ekleyeceğiz. :focus durum!

select {
outline: none;

Ve işte ilerlememizin bir gif’i. Bunun artık sıfır görsel gösterge olduğunu görebilirsiniz. select tıklamadan önce:

sıfırlama seçimiyle etkileşimin demosu

Özel Seçim Kutusu Stilleri

İlk olarak, bazı CSS değişkenleri ayarlayalım. Bu, seçimimizin bir hata durumunu temsil edecek şekilde esnek bir şekilde yeniden renklendirilmesini sağlayacaktır.

:root {
--select-border: #777;
--select-focus: blue;
--select-arrow: var(--select-border);
}

Erişilebilirlik notu: Bir kullanıcı arabirimi öğesi olarak, seçim kenarlığının çevredeki yüzey rengiyle 3:1 veya daha fazla kontrasta sahip olması gerekir.

Şimdi, sarmamıza uygulayacağımız özel seçim stillerini yaratma zamanı. div.select:

.select {
width: 100%;
min-width: 15ch;
max-width: 30ch;
border: 1px solid var(--select-border);
border-radius: 0.25em;
padding: 0.25em 0.5em;
font-size: 1.25rem;
cursor: pointer;
line-height: 1.1;
background-color: #fff;
background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
}

İlk olarak, bazı genişlik kısıtlamaları belirledik. bu min-width ve max-width değerler çoğunlukla bu demo içindir ve kullanım durumunuz için düşürmeyi veya değiştirmeyi seçebilirsiniz.

Ardından, aşağıdakiler dahil olmak üzere bazı kutu modeli özelliklerini uygularız: border, border-radiusve padding. kullanımına dikkat edin. em bu özellikleri kümeyle orantılı tutacak birim font-size.

Sıfırlama stillerinde, birkaç özelliği şu şekilde ayarladık: inheritbu yüzden burada şunları tanımlıyoruz: font-size, cursorve line-height.

Son olarak, en ufak bir boyut için bir gradyan dahil olmak üzere arka plan özelliklerini sağlıyoruz. Arka plan özelliklerini kaldırırsanız, seçim şeffaf olur ve sayfa arka planını alır. Bu arzu edilebilir, ancak, farkında olun ve kontrast üzerindeki etkileri test edin.

Ve işte ilerlememiz:
güncellenmiş seçim artık görsel olarak belirgin bir kutu görünümüne sahip

Özel Seçim Açılır Ok

Açılır okumuz için en heyecan verici modern CSS özelliklerinden birini kullanacağız: clip-path.

Klip yolları, çoğu öğeden varsayılan olarak aldığımız kare ve dikdörtgen şekilleri “kırparak” her türlü şekli yapmamızı sağlar. kullanırken eğlendim clip-path üzerinde son portföy sitem yeniden tasarlandı.

Önce clip-path daha iyi desteğe sahip olan alternatif yöntemler şunları içerir:

  • background-image – tipik olarak bir png, biraz daha modern bir SVG olur
  • ek öğe olarak satır içi SVG
  • en sınır numarası bir üçgen oluşturmak için

SVG, en uygun çözüm gibi görünebilir, ancak background-image dolgu rengi gibi özelliklerini tamamen yeniden tanımlamadan değiştirememe anlamında bir ikon gibi davranma yeteneğini kaybeder. Bu, CSS özel değişkenimizi kullanamayacağımız anlamına gelir.

Bir SVG satır içi yerleştirmek sorunu çözer. fill renk sorunu, ancak her seferinde bir öğe daha eklemek anlamına gelir. <select> tanımlanmış.

İle birlikte clip-pathnet, ölçeklenebilir bir ok “grafiği” elde ederiz. gibi hissettiriyor bir SVG’dir, ancak özel değişkenimizi kullanabilme ve HTML işaretlemesine karşı stilde yer alma avantajlarına sahiptir.

Oku oluşturmak için onu bir ::after sözde eleman.

.select::after {
content: "";
width: 0.8em;
height: 0.5em;
background-color: var(--select-arrow);
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

bu clip-path sözdizimi biraz garip ve bu makalenin asıl konusu olmadığı için aşağıdaki kaynakları öneriyorum:

  • Colby Fayock, sözdizimini şurada bir örnekle açıklıyor: bu yumurta kafalı video
  • klişe dinamik olarak oluştururken bir şekil seçmenize ve noktaları ayarlamanıza izin veren çevrimiçi bir araçtır. clip-path CSS

Takip ediyorsanız, tanımlamaya rağmen okun görünmediğini fark etmiş olabilirsiniz. width ve height. İncelendiğinde, bulundu ki, ::after aslında genişliğine izin verilmiyor.

Bunu güncelleyerek çözeceğiz .select CSS ızgara düzenini kullanmak için.

.select {
display: grid;
}

Bu, okun esas olarak “blok”a benzer bir görüntüleme değeri genişleterek görünmesini sağlar.

klip yolu oku artık yerel seçimin altında görünüyor

Bu aşamada gerçekten bir üçgen oluşturduğumuzu doğrulayabiliriz.

Hizalamayı düzeltmek için en sevdiğim CSS grid hack’imi kullanacağız (burada birkaç makale okuduysanız eski şapka size!).

Eski CSS çözümü: position: absolute
Yeni CSS çözümü: Tek bir grid-template-areas hepsini içermek

Önce alanımızı tanımlayacağız, sonra select ve ::after ikisi de kullanır. Ad, oluşturulduğu öğeye göre belirlenir ve onu “seç” olarak adlandırarak kolaylaştıracağız:

.select {
grid-template-areas: "select";
}

select,
.select:after
{
grid-area: select;
}

Bu, kaynak sipariş yoluyla bağlamı istifleme nedeniyle yerel seçimin üzerindeki okla çakışma sağlar:

yerel seçimin üzerindeki güncellenmiş ok konumunun önizlemesi

Artık her bir öğenin hizalamasını sonlandırmak için ızgara özelliklerini kullanabiliriz:

.select {
align-items: center;
}

.select:after {
justify-self: end;
}

Ta-da!

özel seçim için bitmiş başlangıç ​​stilleri

Oh evet – nasıl kaldırdığımızı hatırla outline? Eksikleri çözmemiz gerekiyor :focus devlet bunu düşürmekten.

adında kullanabileceğimiz yaklaşan bir mülk var. :focus-within ancak şu anda bunun için bir çoklu dolgu eklemek hala en iyisidir.

Bu eğitim için, aynı sonucu elde eden, sadece biraz daha ağır olan alternatif bir yöntem kullanacağız.

Ne yazık ki bu, DOM’a bir öğe daha eklememiz gerektiği anlamına geliyor.

Yerel seçim öğesinden sonra, içindeki son alt öğe olarak .selectEkle:

<span class="focus"></span>

Neden sonra? Bu saf bir CSS çözümü olduğundan, onu yerel seçimden sonra yerleştirmek, onu değiştirebileceğimiz anlamına gelir. select bitişik kardeş seçici kullanılarak odaklanır – +.

Bu, aşağıdaki kuralı oluşturmamızı sağlar:

select:focus + .focus {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 2px solid var(--select-focus);
border-radius: inherit;
}

Neden geri döndüğümüzü merak ediyor olabilirsiniz. position: absolute bir öncekini öğrendikten sonra grid-area hile.

Bunun nedeni, dolguya dayalı ayarlamaları yeniden hesaplamaktan kaçınmaktır. Kendi başınıza denerseniz, eşit ayarın olduğunu göreceksiniz. width ve height %100’e kadar hala dolgu içinde oturmasını sağlar.

İş position: absolute en iyisini yapmak, bir öğenin boyutuyla eşleşmektir. Border özelliğiyle çakıştığından emin olmak için her yönde fazladan bir piksel çekiyoruz.

Ancak, bir ekleme daha yapmamız gerekiyor. .select bizim seçimimize göre olmasını sağlamak için – peki, position: relative.

.select {
position: relative;

Ve işte Chrome’da görüldüğü gibi özel seçimimiz hep birlikte:

özel seçimde odaklanma ve bir seçeneği seçmenin gif demosu

Seçimler, kullanıcının birden fazla seçeneği seçmesine izin veren ikinci bir türde gelir. HTML perspektifinden, bu basitçe şu anlama gelir: multiple öznitelik, ancak stil ayarlamaları oluşturmaya yardımcı olmak için bir sınıf da ekleyeceğiz. select--multiple:

<label for="multi-select">Multiple Select</label>
<div class="select select--multiple">
<select id="multi-select" multiple>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
<option value="Option 5">Option 5</option>
<option value="Option length">
Option that has too long of a value to fit
</option>
</select>
<span class="focus"></span>
</div>

Ve ona baktığımızda, bu görünümde oka ihtiyacımız olmaması dışında, stillerimizin çoğunu olumlu bir şekilde miras aldığını görebiliriz.

daha önce tanımlandığı gibi devralınan stiller ile çoklu seçim

Bu, oku tanımlayan seçicimizi ayarlamak için hızlı bir düzeltmedir. Kullanırız :not() yeni tanımlanan sınıfımızı hariç tutmak için:

.select:not(.select--multiple)::after

Çoklu seçim için birkaç küçük ayarlamamız var, ilki oka yer açmak için daha önce eklenen dolguyu kaldırmak:

select[multiple] {
padding-right: 0;
}

Varsayılan olarak, uzun bir değere sahip seçenekler görünür alanı taşar ve kırpılır, ancak ana tarayıcıların, isterseniz kaydırmanın geçersiz kılınmasına izin verdiğini gördüm:

select[multiple] option {
white-space: normal;
}

İsteğe bağlı olarak, bir ayarlayabiliriz height biraz daha güvenilir çapraz tarayıcı davranışı getirmek için seçimde. Bunu test ederek, Chrome ve Firefox’un kısmi bir seçenek göstereceğini, ancak Safari’nin tam olarak görüntülenemeyen bir seçeneği tamamen gizleyeceğini öğrendim.

Yükseklik doğrudan yerel seçimde ayarlanmalıdır. Diğer stillerimiz göz önüne alındığında, değer 6rem 3 seçenek gösterebilecektir:

select[multiple] {
height: 6rem;
}

Bu noktada mevcut tarayıcı desteğinden dolayı elimizden geldiğince ayarlamalar yaptık.

bu :selected Durumunu options Chrome’da, biraz Firefox’ta oldukça özelleştirilebilir ve Safari’de hiç değil. Bkz. CodePen demosu Bunu önizlemek için yorumlanamayan bir bölüm için.

Ben sadece engelli kontrollerini göstermemeyi savunurken, bu durum için stilleri sadece üslerimizi kapsayacak şekilde hazırlamalıyız.

Engelli durumunu vurgulamak için gri bir arka plan uygulamak istiyoruz. Ama arka plan stillerini ayarladığımız için .select ve yok :parent seçici, bu durum için işlemek üzere son bir sınıf oluşturmamız gerekiyor:

.select--disabled {
cursor: not-allowed;
background-color: #eee;
background-image: linear-gradient(to top, #ddd, #eee 33%);
}

Burada, alanın etkileşime giremeyeceğine dair fazladan bir ipucu olarak imleci güncelledik ve daha önce beyaz olarak ayarladığımız arka plan değerlerini, devre dışı durum için artık daha gri olacak şekilde güncelledik.

Bu, aşağıdaki görünümlerle sonuçlanır:

hem tekli hem de çoklu seçim için devre dışı bırakılmış durum stillerinden önceki

Kendiniz test edebilirsiniz, ancak Firefox, Chrome ve Safari’de (soldan) tam çözümün bir önizlemesi burada:

belirtilen tarayıcılarda son tarz seçimler

Stephanie Eckles (@5t3ph)

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu