Så här gör du anpassade kryssrutor och radioknappar

.wrapper position: relative;  .wrapper input height: 40px; vänster: 0; opacitet: 0; position: absolut; topp: 0; bredd: 40px; 

 har en position: relativ CSS-regeln. Detta hjälper oss att placera kryssrutan och etiketten ::innan och ::efter pseudo-element som använder position: absolut.

Lägg till visuell kryssruta med pseudoelement 

Vi saknar fortfarande en visuell kryssruta. För att lösa detta använder vi först a etikett :: innan element för att lägga till en kant:

.wrapper inmatning + etikett :: före border: 2px solid; innehåll: ""; höjd: 40px; vänster: 0; position: absolut; topp: 0; bredd: 40px; 

Jag har använt en 2px solid gräns och ärftlig färg, men du kan använda en annan kantfärg om du vill. Observera att vi placerar och storlekar detta på samma sätt som vår genomskinliga kryssruta.

Med några extra marginaler för att etiketterna ger oss lite avstånd, så ser det här som våra kryssrutor ser ut på denna punkt:

Anpassade kryssrutor med 2px-gräns.

Nästa steg är att använda etikett :: efter pseudoelement för att ställa in "checken":

.wrapper-inmatning + etikett :: efter innehåll: ""; gräns: 4px solid; gränsen till vänster: 0; border-top: 0; höjd: 20px; vänster: 14px; opacitet: 0; position: absolut; topp: 6px; transformera: rotera (45deg); övergång: ogenomskinlighet 0.2s lätt-i-ut; bredd: 12px; 

Vi skapar kontrollen med hjälp av ett element som vi ger en fyra pixelgräns för nederst och höger. Sedan roterar vi 45 grader: bingo! En anpassad check. Du kan också använda olika kantfärger för att matcha din design.

Pseudoelement utformat med 4px gräns botten och höger. När den roteras 45 grader ser det ut som en kontroll

På detta stadium kan du inte se någonting; vi döljer fortfarande kontrollen visuellt med opacitet: 0. Låt oss åtgärda det!

Avvisa anpassad kontroll med :kontrollerade Pseudo Selector

De :kontrollerade pseudovelectoren riktar sig till en kryssruta när den växlas till "on" -läget. Vi kan använda detta för att ändra opaciteten hos vår anpassade check:

.wrapper-inmatning: kontrollerad + etikett :: efter opacitet: 1; 

Med det gjort är det här vad vi har:

Notera: Det finns en annan sak som vi behöver inkludera i detta, och det är "fokusstilar". Vi diskuterar dem i nästa demo.

2. Anpassad kryssruta med Inline SVG

Låt oss ta saker på en nivå. I stället för ett pseudoelement kunde vi använda en anpassad SVG-ikon för vår kontroll. För att göra det skulle vi placera SVG inuti etiketten:

   Fokusstilar är inte närvarande   

I de flesta fall är SVG bara dekorativt, så aria dolda = "true" gömmer det från AT-enheter.

Lägg till SVG-stilar

Vi måste ange ett par stilar till SVG-elementet så att det placeras och storlek korrekt. Vi kan också använda fylla egenskap för att ändra dess färg (blå I detta fall):

.wrapper inmatning + etikett svg border: 0; fyll: blå; höjd: 20px; bredd: 20px; opacitet: 0; position: absolut; vänster: 10px; topp: 10px; övergång: ogenomskinlighet 0.2s lätt-i-ut; 

Kom ihåg fokuseringsstilar

Inspiration för mina exempel i kryssrutan stiler togs från de som finns i GOV.UKs designsystem för formelement (en lysande resurs, ta en titt). Fokusstilarna är lika viktiga som i något fokusabelt element:

.wrapper input: fokus + label :: före box-shadow: 0 0 0 3px # ffbf47; 

Vi använder en box-shadow för fokus stilar eftersom det kommer att respektera avrundade gränser, som vi också kommer att använda för radioknappar senare

Fokusstilar för kryssrutan: gul kant

Lägg till fokus stilar för Windows "High Contrast Mode"

Windows High Contrast Mode tar bort boxskuggningsregler, så därför måste vi också lägga till transparenta konturstilar:

.wrapper input: fokus + label :: före box-shadow: 0 0 0 3px # ffbf47; kontur: 3px solid transparent; / * För högt kontrastläge i Windows. * /

Den här transparenta konturen visas som en extra kant i hög kontrastläge.

Genomskinlig kontur visas som en extra kant i Windows High Contrast Mode

3. SVG som Pseudo Element Bakgrund

Förutom att använda SVG-kod inline kan vi också återskapa en version av de första anpassade kryssrutorna som vi har gjort, med SVG som bakgrund för pseudoelementet istället för att bygga vår egen "check" med gränser. Vi har täckt alla tekniker du behöver veta för detta, så här är demo för dig att dissekera:

4. Anpassade radioknappstilar

Nästan alla de stilar och logik vi har använt för våra kryssrutor hittills är desamma för radioknappar. Ta en titt på demo och se själv (för att navigera med tangentbordet, använd Piltangenter):

Den enda uppenbara skillnaden är att vi använder border-radius och styling the :kontrollerade Ange lite annorlunda. Du kan säkert också använda en SVG-ikon i det här fallet, jag lämnar det som läxor för dig! Visa oss dina resultat i kommentarfältet.

5. Test för tillgänglighet

Testning är en viktig del av processen när du tinkar med inbyggda HTML-element. Mina tester är långt ifrån perfekt men det här var hur jag gjorde saker för denna handledning:

• Tangentbordstest i alla moderna webbläsare och IE11.
• Voiceover med Safari.
• NVDA Screenreader använder Firefox.
• Talkback med en Android-enhet.
• Färgblinda förhållanden med hjälp av Sim Daltonism-programvaran.
• Hög kontrastläge i Windows.

Förmodligen saknar den här listan röstigenkänningssoftware som Dragon, eller byter enheter. Men i alla mina tester uppträdde de anpassade kryssrutorna och radioknapparna på samma sätt som inbyggda element.

Slutsats och referenser

Förhoppningsvis har denna handledning gett dig en förståelse för hur du skapar anpassade stilar för kryssrutor och radioknappar, samtidigt som du bygger för tillgänglighet.

Jag rekommenderar starkt att lära mer om anpassade formulärelement från dessa resurser:

• Tillgängligheten av Styled Form Controls av Scott O'Hara: Massor av extra exempel som stjärnklassificering, välj och växla.
• GOV.UK formelement.
• Anpassade kryssrutor och radioknappar av Adrian Roselli.