Čisti CSS: Pristupni gumbi i potvrdni gumbi

Ako čitate ovaj članak, znate da dodavanje prilagođenih stilova zadanim potvrdnim okvirima i radio tipkama pomoću samo CSS-a predstavlja bol. Ako se držite zadanih opcija, one izgledaju drugačije u različitim preglednicima. Postoji nekoliko rješenja za rješavanje problema pomoću stvari poput prefiksa dobavljača, pozadinskih slika, unicode znakova i fontova ikona. No većina ovih rješenja ima vlastita pitanja ili nisu konzistentna u svim preglednicima. Osim toga, vrlo malo ovih rješenja fokusira se na pristupačnost.

Također sam otkrio da korištenje bilo kojeg od gore navedenih rješenja ne daje izgled i osjećaj da želim. Ali našao sam jednostavno rješenje koje ne ugrožava izgled i izgled i održava dostupnost.

Pa krenimo! Koristit ćemo sljedeće:

  • :: prije i :: nakon pseudo-elemenata
  • : provjeren CSS selektor pseudo klase
  • + susjedni izbornik braće

Gotovo svi preglednici (IE 10 i noviji) imaju dobru podršku za tri gornja predmeta.

Ovdje ću demonstrirati rješenje za potvrdne okvire, ali radio gumbi koriste isti pristup s malo drugačijim stilovima.

Markup

         

Vanjskim .checkbox omotačem treba kapsulirati ulaz i oznaku tako da znamo da ovaj komad markiranja predstavlja potvrdni okvir.

Sljedeće su stvari potrebne da bi potvrdni okvir funkcionirao:

  • Oznaka se mora pojaviti nakon
  • Atribut id potreban je na
  • Atribut atributa obavezan je na naljepnici

Razlozi ovih zahtjeva bit će objasnjeni u koraku 3 ovog članka.

Korak 1: Sakrivanje zadanog potvrdnog okvira bez gubitka pristupačnosti

Budući da zadani potvrdni okvir ne možemo oblikovati pomoću CSS-a, moramo ga sakriti. Postoji nekoliko načina za sakrivanje :

  • Upotrijebite zaslon: nema
  • Koristite vidljivost: skriveno
  • Koristite neprozirnost: 0
  • Postavite ga sa zaslona koristeći položaj: apsolutnu i nevjerojatno veliku vrijednost, kao što je lijevo: -9999px

Evo zanimljivog članka koji pokriva neke od ovih metoda: http://webaim.org/techniques/css/invisiblecontent/. Ne želimo koristiti prve dvije metode jer čitač zaslona neće moći pročitati zadani potvrdni okvir. Treća metoda mi se najbolje sviđa jer za naš slučaj upotrebe ne moramo nužno postavljati potvrdni okvir sa zaslona. Na svom trenutnom mjestu može ostati nevidljiv.

Važna napomena: Iako je skriveni ulaz još uvijek dostupan, trebamo dodati: fokus stilove kako bi ga korisnici lakše otkrili. To ćemo učiniti u koraku 4.

Pa sakrijmo zadani potvrdni okvir pomoću neprozirnosti: 0:

.checkbox input [type = "checkbox"] {
    neprozirnost: 0;
}

To je ono što vidimo nakon prvog koraka:

2. korak: Izrada lažnog potvrdnog okvira pomoću pseudo-elemenata

Koristeći :: prije i :: nakon pseudo-elemenata, možemo stvoriti lažni potvrdni okvir. Koristit ćemo element :: before za izradu vanjskog okvira i element :: after za izradu kvačice. Te ćemo elemente smjestiti prije teksta na oznaci.

Ovaj korak sam podijelio u tri dijela.

Dio 1: Izrada vanjske kutije

Napravit ćemo :: prije pseudo-elementa element inline-block i dodijeliti mu visinu i širinu. Dodaćemo obrub kako bismo ga učinili vidljivim. Također možete dodati vlastite prilagođene stilove umjesto obruba.

.checkbox label :: prije {
    sadržaj: "";
    zaslon: linijski blok;
    
    visina: 16px;
    širina: 16px;
    
    obrub: 1px kruta tvar;
}

Napomena: sadržaj: "" je potreban da bi se pseudo-element učinio vidljivim. Ako sadržaj nije postavljen, pseudo-element neće biti prikazan.

Dio 2: Izrada kvačice

Napravit ćemo :: nakon pseudo-elementa inline blok i dodijeliti mu visinu i širinu. Također ćemo dodati prilagođene stilove u lijevu i donju obrub i zakrenuti ih za 45 stupnjeva kako bi izgledao kao kvačica.

.checkbox label :: nakon {
    sadržaj: "";
    zaslon: linijski blok;
    visina: 6px;
    širina: 9px;
    obrub lijevo: 2px kruta tvar;
    obrub-dno: 2px kruta tvar;
    
    transformirati: rotirati (-45deg);
}

Dio 3: Postavljanje vanjske kutije i kvačice

Koristit ćemo apsolutno pozicioniranje oba pseudo-elementa u odnosu na tekst na oznaci.

.checkbox label {
    položaj: relativan;
}
.checkbox label :: prije,
.checkbox label :: nakon {
    položaj: apsolutni;
}
/ * Vanjska kutija * /
.checkbox label :: prije {
    gore: 3px;
}
/*Kvačica*/
.checkbox label :: nakon {
    lijevo: 4px;
    vrh: 7px;
}

Korak 3: Postavljanje kvačice pojaviti se i nestati na temelju stanja potvrdnog okvira

Budući da koristimo atribut id na i atribut for na oznaci, moguće je prebaciti stanje zadanog potvrdnog okvira klikom na oznaku. A razlog zbog kojeg smo oznaku postavili nakon je taj što možemo iskoristiti: označeno stanje da bi stil :: nakon pseudo-elementa (kvačica) od naljepnica uz pomoć susjednog odabirača braće kao što je prikazano u nastavku:

/ * Sakrij oznaku prema zadanim postavkama * /
.checkbox input [type = "checkbox"] + oznaka :: nakon {
    sadržaj: nijedan;
}
/ * Pokaži kvačicu na označenom stanju * /
.checkbox input [type = "checkbox"]: označeno + label :: nakon {
    sadržaj: "";
}

Sada imamo funkcionalni potvrdni okvir, ali zapamtite da još uvijek nije dostupan.

Korak 4: Dodavanje stilova fokusiranja kako bi potvrdni okvir bio dostupan

Pomoću: selektora fokusa na ponovo možemo upotrijebiti + susjedni bračni birač da bismo :: pseudo-elementu (vanjskom okviru) naljepnice dali stil fokusa. Sviđa mi se dodavanje istog stila koji koristi Google Chrome, jer su korisnici najviše upoznati s tim stilom.

/ * Dodavanje stilova fokusa na vanjski okvir lažne potvrdne potvrde * /
.checkbox input [type = "checkbox"]: fokus + oznaka :: prije {
    obris: rgb (59, 153, 252) auto 5px;
}

Pokušajte pristupiti potvrdnom polju u gornjem primjeru pomoću tipkovnice.

I gotovi smo! Imamo potpuno pristupačan, prilagodljiv i funkcionalan potvrdni okvir u samo četiri jednostavna koraka.

Ne zaboravite provjeriti čiste CSS potvrdne okvire i radio gumbe u Project Clarity-u i slobodno nas obavijestite o vašim povratnim informacijama!