Zelf­ge­maak­te ra­dio­but­tons met CSS

Ge­bruik de mo­ge­lijk­he­den van HTML en CSS Custom Pro­per­ties om dy­na­mi­sche en her­bruik­ba­re pa­gi­na-elementen te ma­ken.

Web Designer Magazine - - Inhoud -

Ge­bruik HTML en CSS Custom Pro­per­ties voor dy­na­mi­sche en her­bruik­ba­re pa­gi­na-elementen.

Van­daag gaan we ra­dio­but­tons en check­boxen ma­ken met pu­re HTML en CSS. Om de but­tons echt dy­na­misch en her­bruik­baar te ma­ken, ge­brui­ken we de Bem-me­tho­de en CSS Custom Pro­per­ties. Door de Bem-naam­ge­vings­con­ven­tie te ge­brui­ken kun je de custom-sty­le toe­pas­sen op al­leen de elementen die je wilt. En met de CSS Custom Pro­per­ties kun je de ba­sis­ei­gen­schap­pen over­ru­len met een sin­gle-pa­rent-klas­se.

De ma­nier waar­op de check­boxen en ra­dio­but­tons ge­maakt wor­den, is een beet­je een hack. De ei­gen­lij­ke in­put wordt ver­bor­gen en de ‘be­fo­re’ en ‘af­ter’ pseu­do-elementen wor­den ge­bruikt om je ei­gen elementen in CSS te ma­ken. Met de Css3se­lec­tors ad­ja­cent (+) en :check­ed kun je ver­schil­len­de stij­len toe­pas­sen als de in­put ge­checkt is.

Om dat al­le­maal te la­ten wer­ken, is va­li­de en toe­gan­ke­lij­ke HTML no­dig die de ei­gen­schap ‘la­bel for’ ge­bruikt’. Voor de in­put moet dan wel een ID in­ge­steld zijn, zo­dat het la­bel aan­ge­klikt kan wor­den om de in­put als ‘check­ed’ te mar­ke­ren.

Daar­bij wor­den ook Css-tran­si­ties ge­bruikt om de over­gang tus­sen check­ed en un­check­ed te ani­me­ren. Dat wordt ge­daan met de pro­per­ty ‘trans­form’.

We zor­gen ook voor fall­backs voor In­ter­net Ex­plo­rer en ge­brui­ken een me­diaquery voor de Mi­cro­soft-brow­sers, zo­dat er voor zo veel mo­ge­lijk ge­brui­kers een wer­ken­de ver­sie be­schik­baar is.

1. Html-setup

Om te be­gin­nen moet je een for­mu­lier ma­ken met zo­wel ra­dio­but­tons als check­boxen. Zorg er­voor dat je de ‘la­bel for’-pro­per­ty ge­bruikt en maak unie­ke ID’S voor ie­de­re in­put. Zon­der toe­gan­ke­lij­ke HTML zal de­ze ma­nier om for­mu­lie­r­ele­men­ten te sty­len niet wer­ken. <form>

<in­put class=”ra­dio” id=”ra­dio-one” ty­pe=”ra­dio” na­me=”ra­dio” va­lue=”one” />

<la­bel class=”ra­dio__la­bel” for= ”ra­dio-one”>ra­dio But­ton One</la­bel>

<in­put class=”ra­dio” id=”ra­dio-two” ty­pe=”ra­dio” na­me=”ra­dio” va­lue=”two” />

<la­bel class=”ra­dio__la­bel” for= ”ra­dio-two”>ra­dio But­ton Two</la­bel> </form>

2. CSS Custom Pro­per­ties

In het Css-be­stand maak je je ei­gen ba­sa­le custom-pro­per­ties voor je stan­daard kleur, in­put­kleur, in­put-groot­te en spacing-unit, sa­men met de ele­men­tai­re op­maak van de pa­gi­na.

Door de in­put-groot­te in te stel­len op ‘em’ wordt de groot­te a han­ke­lijk van de font­groot­te van de pa­rent-con­tai­ner – wat bij de --spacing-unit niet zo is om­dat die in­ge­steld wordt als ‘rem’-waar­de. <head>

<me­ta http-equiv=”con­tent-ty­pe” con­tent=”text/html; char­set=utf-8”/> <tit­le>flex­box Lay­out Tutorial</tit­le> <me­ta na­me=”vie­w­port” con­tent= ”width=de­vi­ce-width,ini­ti­al-sca­le=1“>

<link rel=”sty­les­heet” href= ”css/main.css”> </head>

3. Ver­berg stan­daard­knop­pen en boxen

Je maakt je ei­gen stij­len voor de ra­dio­but­tons en check­boxen met de pseu­do-elementen van het la­bel, dus kun je ‘ab­so­lu­te’ po­si­ties ge­brui­ken om de in­puts voor de elementen waar je custom-klas­se op toe­ge­past zijn te ver­ber­gen. .check­box, .ra­dio { po­si­ti­on: ab­so­lu­te; left: -9999px; }

4. Sty­le het la­bel

Ver­vol­gens voeg je aan al­le la­bels wat de­fault sty­ling toe met de lay-out-pro­per­ties van Flex­box om de la­bel­tekst ver­ti­caal te cen­tre­ren. Ge­bruik een re­la­tie­ve po­si­ti­o­ne­ring om de pseu­do-elementen hie­rin ab­so­luut te kun­nen po­si­ti­o­ne­ren. .check­box__la­bel, .ra­dio__la­bel { dis­play: flex; align-items: cen­ter; po­si­ti­on: re­la­ti­ve; cur­sor: poin­ter; }

5. Calc()

Er moet links van het la­bel nog wat ruim­te ko­men voor de in­put. De groot­te van de in­put moet up­da­ten met een custom-pro­per­ty. Je kunt calc ge­brui­ken met de --in­put-si­ze custom-pro­per­ty om de be­no­dig­de ruim­te te cre­ë­ren. .check­box__la­bel, .ra­dio__la­bel {

pad­ding-left: calc(var(--in­put-si­ze) * 1.25); height: var(--in­put-si­ze); mar­gin-bottom: calc(var(--spacing-unit) / 4); }

6. Pseu­do-elementen

Om de ‘be­fo­re’ en ‘af­ter’ pseu­do-elementen te kun­nen ge­brui­ken, moet je een con­tent-pro­per­ty op­ne­men, ook al heeft die een le­ge waar­de. Je moet ze ook al­le­maal ab­so­luut links­bo­ven het bij­be­ho­ren­de la­bel po­si­ti­o­ne­ren. .check­box__la­bel::be­fo­re, .check­box__la­bel::af­ter, .ra­dio__la­bel::be­fo­re, .ra­dio__la­bel::af­ter { con­tent: ‘’; po­si­ti­on: ab­so­lu­te; top: 0; left: 0; }

7. Sty­le het ‘be­fo­re’ pseu­doe­le­ment

Om je ei­gen ra­dio­but­tons en check­boxen te ma­ken, moet je ze een breed­te en hoog­te ge­ven. Dat doe je met je --in­put-si­ze custom-pro­per­ty. Maak dan ook een bor­der met de kleur die je in­ge­steld hebt als --in­put-co­lor. .check­box__la­bel::be­fo­re, .ra­dio__la­bel::be­fo­re { dis­play: block; width: var(--in­put-si­ze); height: var(--in­put-si­ze); bor­der: 2px so­lid var(--in­put-co­lor); }

8. Maak de ra­dio­but­tons rond

Om de ra­dio­but­tons te on­der­schei­den van de check­boxen maak je ze rond met de pro­per­ty bor­der-ra­di­us. .ra­dio__la­bel::be­fo­re, .ra­dio__la­bel::af­ter {

bor­der-ra­di­us: 50%; }

9. In­put-focus-stijl

Om toet­sen­bord­ge­brui­kers een vi­su­e­le in­di­ca­tie te bie­den voor waar ze op het for­mu­lier zijn, kun je de :focus-se­lec­tor toe­pas­sen met wat ex­tra stij­len. in­put:focus + .check­box__la­bel::be­fo­re, in­put:focus + .ra­dio__la­bel::be­fo­re {

box-sha­dow: 0 0 0.5em 0.025em rg­ba(0,0,0,0.2);

bor­der-co­lor: #666; }

10. Sty­le het ‘af­ter’ pseu­doe­le­ment

Je hebt nu de stij­len voor de niet ge­se­lec­teer­de elementen, nu moet je de stijl voor het ele­ment ma­ken als het aan­ge­vinkt is. Dat doe je met be­hulp van calc en custom-pro­per­ties om de breed­te, hoog­te en mar­ge in te stel­len. Daar­mee kan alles scha­len als de --in­put-si­ze ver­an­dert of up­da­tet. .check­box__la­bel::af­ter, .ra­dio__la­bel::af­ter {

width: calc(var(--in­put-si­ze) - (var(--spacing-unit) / 2));

height: calc(var(--in­put-si­ze) - (var(--spacing-unit) / 2)); mar­gin: calc(var(--spacing-unit) / 4); back­ground-co­lor: var(--in­put-co­lor); }

11. Be­werk het ‘af­ter’ pseu­doe­le­ment voor ani­ma­ties

Met de ‘trans­form’ pro­per­ty en het in­stel­len van de ‘sca­le’ op 0 en het ge­bruik van de ‘tran­si­ti­on’ pro­per­ty kun je de over­gang van de check­ed en un­check­ed toe­stan­den ani­me­ren. Om het ele­ment van­uit het mid­den te la­ten ani­me­ren, moet je ook de pro­per­ty trans­form-ori­gin in­stel­len. .check­box__la­bel::af­ter, .ra­dio__la­bel::af­ter { trans­form: sca­le(0); trans­form-ori­gin: 50%; tran­si­ti­on: trans­form 150ms; }

12. Ani­meer bij aan­vin­ken

Het ‘af­ter’ pseu­do-ele­ment kan nu ani­me­ren, de eni­ge waar­de die je nu nog moet ver­an­de­ren is de ‘sca­le’. Met be­hulp van de ad­ja­cent-se­lec­tor kun je ver­schil­len­de stij­len aan het la­bel ge­ven als de in­put aan­ge­vinkt is. Daar­voor moe­ten de in­put en het la­bel naast el­kaar staan in de HTML. in­put:check­ed + .check­box__la­bel::af­ter, in­put:check­ed + .ra­dio__la­bel::af­ter {

trans­form: sca­le(1); }

13. Aan custom-pro­per­ties toe­voe­gen

Dat had je mak­ke­lijk kun­nen doen zon­der CSS Custom Pro­per­ties, maar nu komt het voor­deel van het ge­bruik er­van. Start met het in­stel­len van nog twee ba­sis­kleu­ren in het :root-ele­ment. :root { --co­lor-bra­vo: #1b9aaa; --co­lor-char­lie: #ab3428; }

14. Elementen uit­scha­ke­len

Het toe­voe­gen van ex­tra on­der­steu­ning of stij­len voor uit­ge­scha­kel­de elementen kan mak­ke­lijk ge­daan wor­den met de [disa­b­led]-se­lec­tor en de­ze te com­bi­ne­ren met een ad­ja­cent-se­lec­tor. in­put[disa­b­led] + .check­box__la­bel::be­fo­re, in­put[disa­b­led] + .ra­dio__la­bel::be­fo­re

15. Ex­tra for­mu­lie­ren

Zet in je HTML nog twee for­mu­lie­ren en geef ze al­le­bei een een­dui­di­ge klas­sen­naam, zo­dat ie­der for­mu­lie­r­ele­ment een unie­ke ID krijgt. <form class=”bra­vo”>

... </form> <form class=”char­lie”>

... </form>

16. Over­ru­le custom-pro­per­ties

Dank­zij de spe­ci ici­teit en de ma­nier waar­op cas­ca­des wer­ken, kun je de --in­put-co­lor up­da­ten a han­ke­lijk van de klas­sen­naam en ze waar­den van je ba­sis­kleu­ren ge­ven. Dat zal door­wer­ken op de bor­der-kleur en het ge­check­te ele­ment van de in­put. .bra­vo {

--in­put-co­lor: var(--co­lor-bra­vo); } .char­lie { --in­put-co­lor: var(--co­lor-char­lie); }

17. Gro­te­re let­ters

Je kunt ook de font­groot­te aan­pas­sen a han­ke­lijk van de klas­sen­naam. Om­dat de groot­te van de in­put als ‘em’-waar­de is in­ge­steld, zal de in­put­groot­te mee­groei­en met de font­groot­te. .bra­vo { f ont-si­ze: 1.125em; } .char­lie {

font-si­ze: 1.25em; }

18. Up­da­te custom-pro­per­ty­groot­te

Je kunt ook de groot­te van de in­put zelf ona han­ke­lijk ver­an­de­ren en de font­groot­te la­ten aan­pas­sen. Om­dat je calc hebt ge­bruikt en de --spa­cin­gunit pro­per­ty, ver­an­de­ren de ruim­te tus­sen de bor­der en de ill voor de check­ed-sta­tus (het mid­del­ste stuk) niet met de in­put-groot­te. .bra­vo {

--in­put-si­ze: 2.125em; } .char­lie {

--in­put-si­ze: 2.5em;

19. Up­da­te de :root cus­tom­pro­per­ties

Als je de custom-pro­per­ties bin­nen je :root-se­lec­tor up­da­te, zul je zien dat al­leen de in­put­groot­te van het eerst for­mu­lier ver­an­dert. Dat komt door­dat je die ver­der­op in de sty­les­heet over­ru­led. Als je de --spacing-unit up­da­te, geldt die ver­an­de­ring voor het he­le do­cu­ment, waar­door de ruim­te rond­om ie­der ele­ment gro­ter wordt. :root {

--in­put-si­ze: 5em;

--spacing-unit: 2rem; }

20. In­ter­net Ex­plo­rer

He­laas on­der­steunt In­ter­net Ex­plo­rer geen CSS Custom Pro­per­ties, waar­door we fall­back-waar­den mee­ge­ven. Dat werkt, voor een deel, maar ze zijn dan wel al­le­maal even groot en heb­ben de­zelf­de kleur. .check­box__la­bel, .ra­dio__la­bel { pad­ding-left: 2em; pad­ding-left: calc(var(--in­put-si­ze) * 1.25); height: 1.5em; height: var(--in­put-si­ze); mar­gin-bottom: 0.25rem; mar­gin-bottom: calc(var(--spacing-unit) / 4); }

21. Ie-me­diaquery

Met een Mi­cro­soft-spe­ci ie­ke me­diaquery kun je aan­ge­ven wel­ke code al­leen in de Mi­cro­soft­brow­ser ac­tief moet zijn. @me­dia all and (-ms-high-con­trast: no­ne),

(-ms-high-con­trast: ac­ti­ve) { }

22. Custom-pro­per­ties up­da­te

In die me­diaquery kun je een nieu­we ru­le­s­et met fall­backs cre­ë­ren die de fall­backs over­ru­len die je eer­der in de co­de­ba­se hebt ge­zet. We ha­len de code nu door een au­to­pre ixer (au­to­pre ixer.git­hub.io) om zo­veel mo­ge­lijk brow­sers te on­der­steu­nen. .bra­vo .check­box__la­bel, .bra­vo . ra­dio__la­bel { height: 2.125em; pad­ding-left: 2.7em; }

Au­teur Ste­ven Ro­berts

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.