CSS Checkbox Generaator

Mis see tööriist on?

Brauseri vaikimisi checkbox'id näevad igas brauseris erinevad välja ja neid on otse raske ümber kujundada, kuna nende sisseehitatud välimuse joonistab operatsioonisüsteem, mitte lihtne CSS. Standardne lahendus on peita natiivne checkbox visuaalselt ja kujundada selle asemel õde-element, mida juhib checkbox'i :checked olek — sisend jääb täielikult funktsionaalseks ja ligipääsetavaks, muutub ainult selle välimus.

See tööriist ehitab selle mustri kolme levinud checkbox'i stiili jaoks: ümar ruut animeeritud linnukesega, iOS-stiilis liuguv lüliti ja täidetud ring (raadionupu-sarnane) stiil. Klõpsa checkbox'il eelvaates, et näha märgitud olekut, kohanda suurust ja aktsentvärvi, seejärel kopeeri CSS.

Allikas: Selectors Level 4, W3C — spetsifikatsioon, mis defineerib :checked pseudoklassi, millel see tehnika põhineb.

Miks seda kasutada?

• Elav, klõpsatav eelvaade — lülita checkbox, et näha täpselt, kuidas märgitud ja märkimata olekud välja näevad.
• Kolm eristuvat, laialt kasutatud stiili ühes tööriistas: linnukesega ruut, lüliti ja täidetud ring.
• Aluselement jääb päris <input type="checkbox">, seega töötavad klaviatuurinavigatsioon, vormi esitamine ja ekraanilugejad normaalselt edasi.
• Reguleeritav suurus ja aktsentvärv, genereeritud otse CSS väärtustesse, mitte jäetud muutujatena täitmiseks.
• Ikoonifonti, SVG-faili ega pilti pole vaja — linnuke ja nupuke on joonistatud lihtsate CSS piirjoonte ja pseudoelementidega.
• Tasuta, töötab brauseris, registreerimist pole vaja.

Kuidas kasutada

1. Vali stiil: ümar linnukesega ruut, lüliti või täidetud ring.
2. Lohista suuruse liugur, et checkbox'i suuremaks või väiksemaks skaleerida.
3. Vali aktsentvärv — sellest saab märgitud oleku tausta- ja piirjoonevärv.
4. Klõpsa checkbox'il eelvaate paneelil, et kinnitada, et nii märgitud kui märkimata olek näevad head välja.
5. Kopeeri genereeritud CSS oma stiililehele ja kasuta seda igal <input type="checkbox">-il, mis on ümbritsetud sama moodi kui eelvaate märgistus.

Näide

Sisend

Stiil: ümar linnukesega ruut · Suurus: 24px · Värv: oranž

Tulemus

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

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

Checkbox'i sisend on visuaalselt peidetud; nähtav ruut on õde-<span>, mis on kujundatud sisendi :checked oleku põhjal, väikese pööratud piirjoonega joonistatud linnukesena kord märgituna.

Miks peita natiivne checkbox, mitte eemaldada

Kiusatus on jätta päris <input> vahele ja ehitada checkbox pelgalt stiliseeritud <div>-ist koos klõpsukäsitlejaga, kuid see kaotab klaviatuuritoe, vormi esitamise ja ekraanilugeja semantika tasuta saadava asemel. Selle tööriista genereeritud muster hoiab päris checkbox'i sisendi märgistuses — see on lihtsalt visuaalselt peidetud opacity: 0 abil ja ümber paigutatud — nii et brauser käsitleb seda ikka päris checkbox'ina kõiges olulises, samal ajal kui õde-element haldab nähtavat kujundust.

Kolm stiili ülevaates

• Ümar linnukesega ruut: tuttav ruut-linnukesega muster, levinuim vormiväljade, nõusolekukastide ja mitmikvaliku loendite jaoks.
• Lüliti: mõjub kohese sisse/välja seadena, mitte vormiväljana — sobib kõige paremini eelistuste ja seadete lehtedele, mitte checkbox'ide loenditele.
• Täidetud ring: minimalistlik, raadionupu-sarnane välimus, kasulik siis, kui ruudukujuline kast tunduks lähedaste ümarate liidese-elementide kõrval visuaalselt raske.

Sobitamine su liidese ülejäänud osaga

Genereeritud aktsentvärv mõjutab ainult märgitud olekut — vali see, mis on su brändi- või nupuvärv, et checkbox tunduks ülejäänud lehega ühtne. Seo see sama border-radius väärtusega, mida kasutad liidese mujal, sidusama välimuse jaoks.

→ Border Radius Generaator · Värvivalija

Korduma kippuvad küsimused