Mukautetut tyylit puhtaalla CSS: llä

Tämä on jakso 20 sarjassa, jossa tarkastellaan nykyaikaisia CSS-ratkaisuja ongelmiin, joita olen ratkaissut viimeisen yli 13 vuoden ajan olemalla käyttöliittymäkehittäjä.

Moderni CSS antaa meille joukon ominaisuuksia saavuttaaksemme mukautetut valitut tyylit, joilla on lähes identtinen yksittäisten, useiden ja käytöstä poistettujen select -elementtien alkuperäinen ulkonäkö ylimmissä selaimissa.

Muutamia ominaisuuksia ja tekniikoita, joita ratkaisumme käyttää:

• clip-path mukautetun pudotusvalikon luominen
• CSS-ruudukon asettelu natiivin valinnan ja nuolen kohdistamiseksi
• mukautetut CSS-muuttujat kohteelle joustava muotoilu
• em yksiköt suhteelliseen mitoitukseen

Natiivivalintojen yleiset ongelmat #

Kuten kaikkien lomakekenttätyyppien kohdalla, <select> vaihtelee selaimissa sen alkuperäisen ulkonäön mukaan.

Vasemmalta oikealle tämä on <select> -kuvion alkuperäinen ulkoasu Firefoxissa, Chromessa ja Safarissa:

Eroihin kuuluu laatikon koko, kirjasinkoko, viivan korkeus ja suurin erottavuus on ero siinä, miten avattavan osoittimen muotoilu on.

Meidän Tavoitteena on luoda sama alkuperäinen ulkonäkö näissä selaimissa, mukaan lukien useat valinnat ja poistetut tilat.

Huomaa: pudotusvalikko ei ole vieläkään muotoiltavissa, joten kun <select> on avattu, se hakee edelleen selaimen tyylit option -luetteloon. Tämä on ok – voimme hoitaa tämän säilyttääksesi alkuperäisen valinnan vapaan pääsyn!

HTML-pohja # #

Me ” Keskityn aluksi yhteen <select>.

Tarra ei ole osa muotoiluharjoitustamme, mutta se sisältyy yleisenä vaatimuksena, erityisesti for -attribuutti, jolla on id -arvo <select> -kohdassa.

Mukautettujen tyyliemme saavuttamiseksi olemme käärineet alkuperäisen valinnan ylimääräiseen div: ään luokalla select tämän opetusohjelman yksinkertaisuuden vuoksi.

Peruuta ja poista perityt tyylit #

Koska kaikki opetusohjelmani kuuluvat nykyaikaiseksi parhaaksi käytännöksi, lisätään ensin seuraava nollaus:

Tämän jälkeen Voimme aloittaa natiivin select säännön ja soveltaa seuraavaa sen ulkonäköön:

Vaikka suurin osa niistä on todennäköisesti tuttuja, outo pallo on . Tämä on harvoin käytetty ominaisuus, ja huomaat, että se ei ole aivan paikka, josta haluaisimme sitä tukea, mutta mitä se ensisijaisesti tarjoaa meille tässä tapauksessa, on natiivin selaimen pudotusnuolen poistaminen.

Huomaa: CodePen on määritetty käyttämään automaattista korjausta, joka lisää vaaditut valmiiksi vahvistetut versiot ominaisuudesta appearance. Sinun on ehkä määritettävä tämä erikseen projektillesi tai lisättävä ne manuaalisesti. HTML / Sass Jumpstart sisältää automaattisen korjauksen osana tuotantorakennetta.

Hyvä uutinen on, että voimme lisätä yhden säännön, jotta nuoli poistetaan alemmista IE-versioista, jos tarvitset sitä.

Tämä vinkki löytyy erinomainen artikkeli Filament Groupista, joka näyttää vaihtoehtoisen tavan luoda valitut tyylit.

Viimeinen osa on poistaa oletus outline. Älä huoli – me ” Lisää myöhemmin korvaava osio :focus tilaa!

Ja tässä on gif edistyksestämme. Näet, että nyt ei ole visuaalista merkintää siitä, että tämä on select ennen sen napsauttamista:

Mukautetut valintaruudun tyylit #

Aluksi asetetaan joitain CSS-muuttujia. Tämän avulla valintamme voidaan värittää joustavasti uudelleen virhetilan edustamiseksi.

Esteettömyyshuomautus: Valitun reunan käyttöliittymäelementtinä on oltava 3: 1-kontrasti tai suurempi ympäröivää pinnan väriä vastaan.

Nyt on aika luoda mukautetut valintatyylit, joita käytämme kääreemme div.select:

Ensin asetimme joitain leveysrajoituksia. min-width – ja max-width -arvot koskevat enimmäkseen tätä esittelyä, ja voit halutessasi pudottaa tai muuttaa sitä käyttötapaustasi varten.

Sitten käytämme joitain laatikkomallin ominaisuuksia, mukaan lukien border, border-radius ja padding. Huomaa em -yksikön käyttö, joka pitää nämä ominaisuudet verrannollisina joukkoon font-size.

Palautustyyleissä asetetaan useille ominaisuuksille inherit, joten tässä määritellään ne, mukaan lukien font-size, cursor ja line-height.

Lopuksi toimitamme sille taustaominaisuudet, mukaan lukien kaltevuus pienimmälle osalle ulottuvuus. Jos poistat taustan ominaisuudet, valinta on läpinäkyvä ja poimii sivun taustan. Tämä voi olla toivottavaa, mutta ole tietoinen ja testaa kontrastin vaikutuksia.

Ja tässä on edistyksemme:

Mukautettu Valitse pudotusnuoli #

Avattavassa nuolessa käytämme yhtä mielenkiintoisimmista moderneista CSS-ominaisuuksista: clip-path.

Leikkauspolkujen avulla voimme tehdä kaikenlaisia muotoja ”leikkaamalla” muuten neliön ja suorakulmion muodot, jotka saamme oletuksena useimmista elementeistä. Minulla oli hauskaa käyttää clip-path äskettäisessä portfoliosivustoni uudistuksessa.

Ennen kuin clip-path sai paremman tuen, mukana oli vaihtoehtoisia menetelmiä:

• background-image – tyypillisesti png, hieman nykyaikaisempi olisi SVG
• upotettu SVG lisäelementtinä
• reunan temppu kolmion luomiseen

SVG saattaa tuntua optimaaliselta ratkaisulta, mutta kun sitä käytetään background-image, se menettää kykynsä toimia kuvakkeena siinä mielessä, ettei pysty t o muuttaa sen ominaisuuksia, kuten täyteväriä, määrittelemättä sitä kokonaan uudelleen. Tämä tarkoittaa, että emme voi käyttää mukautettua CSS-muuttujaa.

SVG-rivin sijoittaminen ratkaisee fill -väriongelman, mutta se tarkoittaa, että sisällytetään vielä yksi elementti joka kerta, kun <select> on määritelty.

Kun clip-path saadaan terävä, skaalattava nuoli ”graafinen”, joka tuntuu SVG: ltä, mutta etuina siitä, että voimme käyttää mukautettua muuttujaa ja olla tyylissä HTML-merkinnän kanssa.

Luodaksemme nuolen määritämme sen nimellä ::after pseudoelementti.

clip-path -syntaksi on hieman outo, ja koska se ”s ei oikeastaan ole tämän artikkelin keskipiste, suosittelen seuraavia resursseja:

• Colby Fayock selittää syntaksin esimerkillä tässä munapäävideossa
• Clippy on online-työkalu, jonka avulla voit valita muodon ja säätää pisteitä samalla luomalla dynaamisesti clip-path CSS

Jos seuraat uudelleen siipi pitkin, olet ehkä huomannut, että nuoli ei tule näkyviin määrittelemättä width ja height. Tarkastettuaan se havaitsi, että ::after ei tosiasiallisesti sallita sen leveyttä.

Ratkaisemme tämän päivittämällä .select käyttääksesi CSS-ruudukon asettelua.

Tämän avulla nuoli voidaan näyttää laajentamalla sitä olennaisesti ”lohkoon”.

Tässä vaiheessa voimme varmistaa, että olemme todella luoneet kolmion.

Tasauksen korjaamiseksi käytämme suosikkini CSS-verkkohakkeriä (vanha hattu sinulle, jos olet lukenut muutaman artikkelin täältä!).

Vanha CSS-ratkaisu: position: absolute Uusi CSS-ratkaisu: Yksittäinen grid-template-areas, joka sisältää ne kaikki

Ensin määritämme alueemme ja sitten, että select ja ::after käyttävät sitä molempia. Nimi määritetään sen elementin kohdalle, jolle se on luotu, ja pidämme sen helposti kutsumalla sitä ”select”:

Mikä antaa meille päällekkäisyyden natiivin valinnan yläpuolella oleva nuoli johtuu kontekstista pinoamisen lähdeluettelon kautta:

Voimme nyt käyttää ruudukko-ominaisuuksia tasoituksen viimeistelyyn jokaisen elementin:

Ta-da!

: kohdennustila #

Voi joo – muista, kuinka poistimme outline? Meidän on ratkaistava puuttuva :focus tila poistamasta sitä.

On tuleva ominaisuus, jota voimme käyttää nimellä :focus-within, mutta on silti parasta sisällyttää siihen polyfill-tiedosto tähän aika.

Tässä opetusohjelmassa käytämme vaihtoehtoista menetelmää, jolla saavutetaan sama tulos, vain hieman heftier.

Valitettavasti tämä tarkoittaa, että meidän on lisättävä vielä yksi elementti DOM.

Natiivin valintaelementin jälkeen viimeisenä .select -alueen lapsi, lisää:

Miksi jälkeen? Koska tämä on puhdas CSS-ratkaisu, sen sijoittaminen alkuperäisen valinnan jälkeen tarkoittaa sitä, että voimme muuttaa sitä, kun select kohdennetaan viereisen sisaruksen valitsimen avulla – +.

Tämän avulla voimme luoda seuraavan säännön:

Saatat miettiä, miksi palataan position: absolute saatuaan edellisen grid-area hakata.

Syynä on välttää pehmusteen perusteella tehtävien säätöjen laskeminen uudelleen. Jos kokeilet sitä itse, huomaat, että vaikka asetat width ja height 100%: iin, se silti istuu pehmusteen sisällä. .

Tehtävä position: absolute toimii parhaiten, mikä vastaa elementin kokoa. Vedämme siitä ylimääräisen pikselin kumpaankin suuntaan varmistaaksemme, että se menee päällekkäin ominaisuus.

Meidän on kuitenkin lisättävä vielä yksi lisäys ryhmään .select varmistaaksemme, että se on suhteessa valitsemamme – hyvin, position: relative.

Ja tässä mukautettu valinta valitse kaikki yhdessä, kuten Chromessa:

Useita valintoja #

Valinnat tulevat toisella makulla, jonka avulla käyttäjä voi valita useamman kuin yhden vaihtoehdon. HTML-näkökulmasta tämä tarkoittaa yksinkertaisesti multiple -attribuutin lisäämistä, mutta lisäämme myös luokan auttamaan luomaan tyylimuutoksia nimeltä select--multiple :

Ja katsomalla voimme nähdä, että se on perinyt suurimman osan tyylistämme suotuisasti, paitsi että emme tarvitse nuolta tässä näkymässä.

Tämä on pikakorjaus nuolen määrittelevän valitsimen säätämiseen. Käytämme :not() sulkemaan äskettäin määritelty luokka:

Meillä on muutama pieni säätö, jotka on tehtävä useita valintoja varten. Ensimmäinen on aiemmin lisätyn pehmusteen poistaminen nuolen tilaa varten:

Oletusarvoisesti vaihtoehdot, joilla on pitkä arvo, ylittävät näkyvän alueen ja leikataan, mutta huomasin, että pääselaimet sallivat kääreen ohittamisen, jos haluat:

Vaihtoehtoisesti voimme asettaa valitulle height tuoda hieman luotettavampi selainten välinen käyttäytyminen. Testaamalla tämän sain tietää, että Chrome ja Firefox näyttävät osittaisen vaihtoehdon, mutta Safari piilottaa kokonaan vaihtoehdon, jota ei voida näyttää kokonaan.

Korkeus on asetettava suoraan alkuperäisessä valinnassa . Kun otetaan huomioon muut tyylimme, arvo 6rem voi näyttää 3 vaihtoehtoa:

Tässä vaiheessa nykyisen selaintuen vuoksi olemme tehneet niin paljon muutoksia kuin pystymme.

:selected -tila options on melko muokattavissa Chromessa, hieman Firefoxissa eikä ollenkaan Safarissa. Katso CodePen-esittelystä osa, jota ei voi kommentoida esikatsellaksesi tätä.

: käytöstä poistetut tyylit #

Vaikka suosittelisin seuraavaa: yksinkertaisesti ei näytetä käytöstä poistettuja ohjaimia, meidän tulisi valmistella tyylit kyseiselle tilalle vain peittämään tukiasemamme.

Vammaisten tilan korostamiseksi haluamme käyttää harmaata taustaa. Mutta koska olemme asettaneet taustatyylejä .select -ohjelmaan ja valitsinta ei ole ”ta :parent -valitsin, meidän on luotava viimeinen luokka käsiteltäväksi tämä tila:

Tässä olemme päivittäneet kohdistimen ylimääräisenä vihjeenä, että kenttää ei voida käyttää, ja päivitimme aiemmin asettamamme tausta-arvot ole valkoinen, jotta se olisi nyt harmaampi vammaisille.

Tämä johtaa seuraaviin esiintymisiin:

Demo #

Voit testata sen itse, mutta tässä on esikatselu koko ratkaisusta (vasemmalta) Firefoxista, Chromesta ja Safarista:

Kirjoittanut Stephanie Eckles (@ 5t3ph)