CSS žymimojo langelio generatorius

Pasirinkite žymimojo langelio stilių, nustatykite dydį ir akcentinę spalvą, ir šis įrankis sugeneruos CSS kodą, kuris paprastą naršyklės žymimąjį langelį pakeis pritaikyto stiliaus, bet vis tiek visiškai spustelėjamu ir prieinamu elementu — jokių piktogramų šriftų ar paveikslėlių nereikia.

Kas yra šis įrankis?

Numatytieji naršyklės žymimieji langeliai kiekvienoje naršyklėje atrodo skirtingai ir juos sunku pritaikyti tiesiogiai, nes jų standartinę išvaizdą piešia operacinė sistema, o ne grynas CSS. Standartinis sprendimas — vizualiai paslėpti natyvų žymimąjį langelį ir stilizuoti šalia esantį elementą, valdomą langelio :checked būsenos — įvestis lieka visiškai funkcionali ir prieinama, keičiasi tik jos išvaizda.

Šis įrankis sukuria tokį šabloną trims dažniausiai naudojamiems žymimųjų langelių stiliams: suapvalintam langeliui su animuota varnele, iOS stiliaus slenkančiu perjungimo jungikliu, ir užpildytu apskritimu (į radio mygtuką panašiu) stiliumi. Spustelėkite žymimąjį langelį peržiūroje, kad pamatytumėte pažymėtą būseną, koreguokite dydį ir akcentinę spalvą, tada kopijuokite CSS.

Šaltinis: Selectors Level 4, W3C — specifikacija, apibrėžianti :checked pseudo-klasę, kuria remiasi ši technika.

Kodėl jį naudoti?

Gyva, spustelėjama peržiūra — perjunkite žymimąjį langelį, kad pamatytumėte tiksliai, kaip atrodo pažymėta ir nepažymėta būsenos.
Trys skirtingi, dažnai naudojami stiliai viename įrankyje: varnelės langelis, perjungimo jungiklis ir užpildytas apskritimas.
Pagrindinis elementas lieka tikras <input type="checkbox">, tad klaviatūros naršymas, formos pateikimas ir ekrano skaitytuvai toliau veikia normaliai.
Reguliuojamas dydis ir akcentinė spalva, sugeneruoti tiesiai į CSS reikšmes, o ne palikti kaip kintamieji, kuriuos reikia užpildyti.
Nereikia piktogramos šrifto, SVG failo ar paveikslėlio — varnelė ir rankenėlė piešiamos paprastais CSS rėmeliais ir pseudo-elementais.
Nemokama, veikia jūsų naršyklėje, be registracijos.

Kaip naudoti

Pasirinkite stilių: suapvalintą varnelę, perjungimo jungiklį ar užpildytą apskritimą.
Vilkite dydžio slankiklį, kad padidintumėte ar sumažintumėte žymimąjį langelį.
Pasirinkite akcentinę spalvą — ji taps pažymėtos būsenos fono ir rėmelio spalva.
Spustelėkite žymimąjį langelį peržiūros skydelyje, kad patikrintumėte, ar tiek pažymėta, tiek nepažymėta būsena atrodo tinkamai.
Nukopijuokite sugeneruotą CSS į savo stilių lapą ir naudokite jį bet kuriam <input type="checkbox">, apgaubtam taip pat, kaip peržiūros žymėjimas.

Pavyzdys

Įvestis

Stilius: suapvalinta varnelė · Dydis: 24px · Spalva: oranžinė

Išvestis

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

Žymimojo langelio įvestis yra vizualiai paslėpta; matomas langelis yra šalia esantis <span>, stilizuotas pagal įvesties :checked būseną, su nedideliu pasuktu rėmeliu, nupieštu kaip varnelė, kai pažymima.

Kodėl slėpti natyvų žymimąjį langelį, o ne jo pašalinti

Kyla pagunda praleisti tikrą <input> ir sukurti žymimąjį langelį vien iš stilizuoto <div> su spustelėjimo apdorotoju, bet tai iš karto prarandama klaviatūros palaikymas, formos pateikimas ir ekrano skaitytuvo semantika. Šio įrankio sugeneruotas šablonas palieka tikrą žymimojo langelio įvestį žymėjime — tik vizualiai paslėptą su opacity: 0 ir perkeltą — todėl naršyklė vis tiek traktuoja jį kaip tikrą žymimąjį langelį visais svarbiais aspektais, o šalia esantis elementas tvarko matomą stilių.

Trys stiliai iš pirmo žvilgsnio

Suapvalinta varnelė: pažįstamas kvadrato su varnele šablonas, dažniausias formos laukams, sutikimo žymimiesiems langeliams ir kelių pasirinkimų sąrašams.
Perjungimo jungiklis: skaitosi kaip momentinis įjungta/išjungta nustatymas, o ne formos laukas — geriausiai tinka nuostatoms ir nustatymų ekranams, o ne žymimųjų langelių sąrašams.
Užpildytas apskritimas: minimalistinė, į radio mygtuką panaši išvaizda, naudinga, kai kvadratinis langelis vizualiai atrodytų sunkus greta suapvalintų sąsajos elementų.

Suderinimas su likusia jūsų sąsaja

Sugeneruota akcentinė spalva veikia tik pažymėtą būseną — pasirinkite savo prekės ženklo ar mygtuko spalvą, kad žymimasis langelis atrodytų nuoseklus su likusiu puslapiu. Suderinkite jį su tuo pačiu border-radius, naudojamu kitur sąsajoje, kad išvaizda būtų vientisesnė.

→ border-radius generatorius · Spalvų parinkiklis

Dažniausiai užduodami klausimai

Ar stilizuotas žymimasis langelis vis dar prieinamas?

Taip — pagrindinis elementas yra tikras <input type="checkbox">, tik vizualiai paslėptas, o ne pašalintas. Jis vis dar gauna fokusą, reaguoja į klaviatūros įvestį (tarpo klavišas perjungimui) ir teisingai paskelbiamas ekrano skaitytuvų, nes pagalbinė technologija skaito pačią įvestį, o ne šalia esantį stilizuotą span.

Kodėl CSS naudoja gretimo elemento selektorių, pvz., input:checked + .mark?

Kadangi matomas langelis yra atskiras elementas nuo tikrosios žymimojo langelio įvesties, CSS reikia būdo stilizuoti tą gretimą elementą pagal įvesties būseną. Kombinatorius + pasirenka elementą iškart po pažymėtos įvesties — tai standartinė technika kuriant pritaikytus žymimųjų langelių ir radio mygtukų stilius be JavaScript.

Ar galiu tai naudoti tikroje formoje, o ne tik demonstracijai?

Taip — nukopijuokite sugeneruotą CSS ir apgaubkite tikrą formos žymimojo langelio įvestį ta pačia žymėjimo struktūra, kuri rodoma HTML/peržiūroje. Kadangi tai vis tiek natyvus žymimasis langelis, jis pateikiamas su forma lygiai taip pat, kaip nestilizuotas, ir veikia su esama formos validavimo logika.

Kodėl varnelė animuota suapvalintame stiliuje?

Trumpa mastelio didinimo animacija ant varnelės pažymėtą būseną paverčia labiau apgalvota ir reaguojančia nei momentinis atsiradimas/išnykimas — tai dažnas šablonas ištobulintuose sąsajos žymimuosiuose langeliuose. Tai nedidelė CSS keyframes taisyklė, įtraukta kartu su likusiu sugeneruotu kodu.

Ar perjungimo jungiklio stiliui reikia kitokio HTML?

Ne — visi trys stiliai naudoja tą patį pagrindinį žymėjimą (paslėptą žymimojo langelio įvestį plius šalia esantį elementą matomai figūrai). Šio įrankio stiliaus keitimas keičia tik toms pačioms struktūrai taikomas CSS taisykles, tad vėliau galite keisti stilius neliesdami savo HTML.