Egyéni kiválasztási stílusok tiszta CSS-sel

Ez a 20. epizód egy sorozatban, amely a CSS modern megoldásait vizsgálja. a frontend fejlesztőjének elmúlt 13+ évében.

A modern CSS számos olyan tulajdonságot kínál, amelyek lehetővé teszik az egyedi kiválasztott stílusok elérését, amelyek szinte azonosak kezdeti megjelenés egyetlen, többszörös és letiltott select elemeknél a legnépszerűbb böngészőkben.

Néhány tulajdonság és technika, amelyet megoldásunk használni fog:

• clip-path az egyéni legördülő nyíl létrehozásához
• CSS rács elrendezés a natív kijelölés és nyíl igazításához
• egyéni CSS változók a következőhöz: rugalmas stílus
• em egységek a relatív méretezéshez

A natív kiválasztásokkal kapcsolatos gyakori problémák #

Mint minden űrlapmezőtípus esetében, a <select> is böngészőben változik eredeti megjelenésében.

Balról jobbra íme a <select> kezdeti megjelenése Firefoxban, Chrome-ban és Safari-ban:

A különbségek között szerepel a dobozméret, a betűméret, a vonalmagasság, és a legszembetűnőbb a legördülő menü stílusának különbsége.

a cél ugyanaz a kezdeti megjelenés létrehozása ezekben a böngészőkben, beleértve a többszörös kijelölést és a letiltott állapotokat is.

Megjegyzés: A legördülő lista továbbra sem stílusos, így a <select> megnyitásakor továbbra is felveszi az egyes böngészők stílusait a option listához. Ez rendben van – foglalkozhatunk ezzel, hogy megőrizzük a natív kiválasztottak ingyenes hozzáférhetőségét!

HTML HTML #

Mi ” A kezdéshez egyetlen <select> -re koncentrálok.

A címke nem része a formázási gyakorlatunknak, de általános követelményként szerepel, nevezetesen a for attribútum, amelynek értéke id a <select> oldalon.

Az egyéni stílusok elérése érdekében a natív kiválasztást egy extra div osztályba csomagoltuk select osztályba az egyszerűség kedvéért ebben az oktatóanyagban.

Örökített stílusok visszaállítása és eltávolítása #

Amint minden oktatóanyagomban modern legjobb gyakorlatként szerepel, először a következő visszaállítást adjuk hozzá:

Ezt követően megkezdhetjük a natív select szabályt, és a következőket alkalmazhatjuk megjelenésének pihentetésére:

Bár ezek többsége valószínűleg ismerős, a páratlan ki . Ez egy ritkán használt tulajdonság, és megjegyzi, hogy nem egészen az, ahol támogatást szeretnénk kérni, de amit ebben az esetben elsősorban a natív böngésző legördülő nyíl eltávolításával lát el.

Megjegyzés: A CodePen úgy van beállítva, hogy autoprefixert használjon, amely hozzáadja a appearance tulajdonság szükséges előre rögzített verzióit. Lehet, hogy ezt kifejezetten be kell állítania a projektjéhez, vagy manuálisan kell hozzáadnia. A HTML / Sass Jumpstart az automatikus előjavítót tartalmazza a produkciós build részeként.

Jó hír, hogy még egy szabályt hozzáadhatunk a nyíl eltávolításához az alsó IE verziókhoz, ha szükség van rá:

Ez a tipp található a kiváló cikk a Filament Group-tól, amely alternatív módszert mutat be a kiválasztott stílusok létrehozására.

Az utolsó rész az alapértelmezett outline eltávolítása. Ne aggódj – mi ” Később hozzáadom a :focus állapot!

És itt van egy gif a fejlődésünkről. Láthatja, hogy nulla vizuális jelzés van arról, hogy ez egy select, mielőtt rákattintana:

Custom Select Box Styles #

Először állítsunk be néhány CSS-változót. Ez lehetővé teszi, hogy a választóink rugalmasan újraszíneződjenek, hogy hibát jelezzenek.

Kisegítő lehetőségekre vonatkozó megjegyzés: Felhasználói felület elemként a kijelölt szegélynek 3: 1 kontrasztúnak kell lennie, ill. nagyobb a környező felületi színnel szemben.

Itt az ideje, hogy létrehozzuk azokat az egyedi kiválasztási stílusokat, amelyeket a csomagolásunkra alkalmazunk div.select:

Először beállítottunk néhány szélességi korlátot. A min-width és max-width értékek többnyire erre a bemutatóra vonatkoznak, és dönthet úgy, hogy eldobja vagy megváltoztatja a felhasználási esetet.

Ezután néhány dobozmodelltulajdonságot alkalmazunk, beleértve a border, border-radius és padding. Vegye figyelembe az em egység használatát, amely ezeket a tulajdonságokat a font-size halmazsal fogja arányosan tartani.

A visszaállítási stílusokban számos tulajdonságot beállítottunk inherit -re, ezért itt definiáljuk azokat, beleértve a font-size -et, cursor és line-height.

Végül háttér tulajdonságokat adunk meg neki, beleértve a színátmenetet a legkisebb dimenzió. Ha eltávolítja a háttér tulajdonságait, akkor a kijelölés átlátszó lesz, és felveszi az oldal hátterét. Ez kívánatos lehet, azonban vegye figyelembe, és tesztelje a kontraszt hatásait.

És itt van a fejlődésünk:

Custom Válassza a legördülő nyíl #

A legördülő nyílhoz az egyik legizgalmasabb modern CSS tulajdonságot fogjuk használni: clip-path.

A klip-utak segítségével mindenféle alakzatot úgy készíthetünk, hogy “levágjuk” az egyébként négyzet és téglalap alakzatokat, amelyeket alapértelmezésként kapunk a legtöbb elemtől. A legutóbbi portfólió-webhelyem újratervezésénél szórakoztam a clip-path használatával.

Mielőtt a clip-path jobb támogatást kapna, alternatív módszerek szerepelnek:

• background-image – tipikusan egy png, valamivel korszerűbb lenne SVG
• beillesztett SVG kiegészítő elemként
• a határ trükk egy háromszög létrehozásához

SVG úgy érezheti, mint az optimális megoldás, de background-image ként használva elveszíti az ikonként való viselkedés képességét abban az értelemben, hogy nem képes t o változtassa meg tulajdonságait, például a kitöltési színt, anélkül, hogy azt teljesen újra definiálná. Ez azt jelenti, hogy nem használhatjuk a CSS egyéni változónkat.

Az SVG inline elhelyezése megoldja a fill színproblémát, azonban azt jelenti, hogy minden egyes esetben egy újabb elemet kell beépíteni id = “17571f51ae”> meg van határozva.

A clip-path segítségével egy éles, méretezhető nyíl “grafikát” kapunk, amely SVG-nek érzi magát, de azzal az előnnyel, hogy használhatjuk az egyéni változónkat, és szerepelhetünk a stílusban a HTML jelöléssel szemben.

A nyíl létrehozásához ::after ál-elem.

A clip-path szintaxis kissé furcsa, és mivel “s Nem igazán a cikk középpontjában áll, a következő forrásokat ajánlom:

• Colby Fayock ebben a tojásfejű videóban bemutatja a szintaxist.
• A Clippy egy online eszköz, amely lehetővé teszi válassza ki az alakzatot és állítsa be a pontokat, miközben dinamikusan generálja a clip-path CSS-t

Ha újra követi szárny mentén, észrevehette, hogy a nyíl a width és height meghatározása ellenére sem jelenik meg. Ellenőrzéskor kiderült, hogy a ::after szélessége valójában nem engedélyezett.

Ezt a a CSS rácselrendezés használatához.

Ez lehetővé teszi a nyíl megjelenését azzal, hogy lényegében kiterjeszti a “blokkhoz” hasonló megjelenítési értéket.

Ebben a szakaszban ellenőrizhetjük, hogy valóban létrehoztunk-e egy háromszöget.

Az igazítás kijavításához használom a kedvenc CSS rácshackemet (régi kalapot neked, ha elolvastál itt néhány cikket!).

Régi CSS megoldás: position: absolute Új CSS megoldás: Egyetlen grid-template-areas az összes befogadására

Először meghatározzuk a területünket, majd meghatározzuk, hogy a select és a ::after egyaránt használja. A név az elemhez tartozik, amelyhez létrehozták, és “megkönnyítjük, ha” select “-nek hívjuk:

Ez átfedést ad számunkra a natív kijelölés fölötti nyíl a kontextus egymásra helyezése miatt a forrás sorrendjén keresztül:

Most már rács tulajdonságokat használhatunk az igazítás befejezéséhez minden elem:

Ta-da!

: fókuszállapot #

Ó, igen – emlékszel, hogyan távolítottuk el a outline -t? Meg kell oldanunk a hiányzó :focus állapot ennek eldobásából.

Van egy közelgő tulajdonság, amelyet :focus-within néven használhatunk, de még mindig a legjobb egy polifill kitöltése hozzá idő.

Ehhez az oktatóanyaghoz alternatív módszert fogunk használni, amely ugyanazt az eredményt éri el, csak kissé heftier.

Sajnos ez azt jelenti, hogy még egy elemet kell hozzáadnunk a a DOM.

A natív select elem után, mint utolsó gyermek .select belül, adja hozzá:

Miért? Mivel ez egy tiszta CSS megoldás, a natív választás után való elhelyezés azt jelenti, hogy megváltoztathatjuk, amikor a select a szomszédos testvérválasztó használatával fókuszálódik – +.

Ez lehetővé teszi számunkra a következő szabály létrehozását:

Lehet, hogy kíváncsi vagy, miért térünk vissza a position: absolute az előző grid-area hack megtanulása után.

Ennek oka az, hogy kerülni kell a párnázás alapján történő kiigazítások újraszámítását. Ha egyedül próbálja ki, akkor látni fogja, hogy még a width és height 100% -ra állításával is a párnán belül ül. .

A position: absolute feladat a legjobban megfelel az elem méretének. Megfelelő pixeleket húzunk mindkét irányba, hogy megbizonyosodjunk arról, hogy átfedik a szegélyt tulajdonság.

De még egy kiegészítést kell tennünk a .select elemhez annak biztosítása érdekében, hogy viszonyuljon a kiválasztottunkhoz – nos, position: relative.

És itt a mi szokásunk a Chrome-ban látott összes kiválasztása:

Többszörös kijelölés #

A kijelölések második ízűek, így a felhasználó egynél több lehetőséget választhat. HTML szempontból ez egyszerűen azt jelenti, hogy hozzáadja a multiple attribútumot, de hozzáadunk egy osztályt is, amely segít létrehozni a select--multiple nevű stíluskorrekciókat. :

És ha megnézzük, láthatjuk, hogy a legtöbb stílusunkat örömmel örökölte, kivéve, ha ebben a nézetben nincs szükségünk a nyílra.

Ez egy gyors javítás a nyíl meghatározó választójának beállításához. A :not() elemet használjuk az újonnan definiált osztály kizárására:

Pár apróbb kiigazítást kell elvégeznünk a többszörös kijelölésnél, az első a korábban hozzáadott párnázás eltávolítása a nyíl számára:

Alapértelmezés szerint a hosszú értékű opciók túlcsordítják a látható területet és levágásra kerülnek, de azt tapasztaltam, hogy a fő böngészők lehetővé teszik a csomagolás felülírását, ha szeretné:

Opcionálisan beállíthatunk egy height -t is a select-en, hogy egy valamivel megbízhatóbb a böngészők közötti viselkedés. Ennek tesztelésével megtudtam, hogy a Chrome és a Firefox részleges opciót fog mutatni, de a Safari teljesen elrejti azokat az opciókat, amelyek nem láthatók teljes mértékben.

A magasságot közvetlenül a natív kijelölőn kell beállítani . Más stílusainkra figyelemmel a 6rem érték 3 opciót fog tudni megjeleníteni:

Ezen a ponton a böngésző jelenlegi támogatása miatt annyi beállítást hajtottunk végre, amennyire csak tudunk.

A :selected állapot a options fájl meglehetősen testreszabható a Chrome-ban, kissé a Firefox-ban, és egyáltalán nem a Safari-ban. Tekintse meg a CodePen bemutatóját egy szakaszhoz, amelyet nem lehet megnézni az előnézet megtekintéséhez.

: tiltott Stílusok #

Bár én ezt javasolnám egyszerűen nem mutatva a letiltott vezérlőket, elő kell készítenünk a stílusokat ehhez az állapothoz, csak az alapjaink lefedése érdekében.

A fogyatékkal élő állapot hangsúlyozásához szürkés hátteret szeretnénk alkalmazni. De mivel háttérstílusokat állítottunk be a .select fájlra, és nincs “ta :parent választó, létre kell hoznunk egy utolsó osztályt, amelyet kezelni lehet ez az állapot:

Itt frissítettük a kurzort, mint plusz tippet arra, hogy a mezővel nem lehet kölcsönhatásba lépni, és frissítettük a korábban beállított háttérértékeket légy fehér, hogy a szürkébb legyen a fogyatékkal élők számára.

Ez a következő megjelenéseket eredményezi:

Demo #

Kipróbálhatja magának, de itt a Firefox, a Chrome és a Safari teljes oldalának bal oldali áttekintése található:

Írta: Stephanie Eckles (@ 5t3ph)