Generator CSS potrditvenih polj

Kaj je to orodje?

Privzeta potrditvena polja brskalnika izgledajo drugače v vsakem brskalniku in jih je težko neposredno preoblikovati, saj njihov vgrajen izgled riše operacijski sistem, ne navaden CSS. Standardna rešitev je vizualno skriti izvirno potrditveno polje in namesto tega oblikovati sosednji element, voden s stanjem :checked polja — vnosno polje ostane popolnoma funkcionalno in dostopno, spremeni se le njegov videz.

To orodje zgradi ta vzorec za tri pogoste sloge potrditvenih polj: zaobljen kvadratek z animirano kljukico, drsno stikalo v slogu iOS in zapolnjen krog (podoben radijskemu gumbu). Klikni potrditveno polje v predogledu, da vidiš potrjeno stanje, prilagodi velikost in poudarno barvo, nato kopiraj CSS.

Vir: Selectors Level 4, W3C — specifikacija, ki definira psevdorazred :checked, na katerem temelji ta tehnika.

Zakaj ga uporabiti?

• Živ, klikljiv predogled — preklopi potrditveno polje, da natančno vidiš, kako izgledata potrjeno in nepotrjeno stanje.
• Trije različni, pogosto uporabljani slogi v enem orodju: kljukica v okvirčku, drsno stikalo in zapolnjen krog.
• Osnovni element ostaja pravi <input type="checkbox">, zato krmarjenje s tipkovnico, oddaja obrazcev in bralniki zaslona še naprej normalno delujejo.
• Prilagodljiva velikost in poudarna barva, ustvarjeni neposredno v vrednosti CSS namesto puščeni kot spremenljivke za izpolnitev.
• Ni potrebna pisava z ikonami, datoteka SVG ali slika — kljukica in gumb sta narisana z navadnimi CSS robovi in psevdoelementi.
• Brezplačno, deluje v tvojem brskalniku, brez prijave.

Kako ga uporabljati

1. Izberi slog: zaobljena kljukica, drsno stikalo ali zapolnjen krog.
2. Povleci drsnik velikosti, da potrditveno polje povečaš ali pomanjšaš.
3. Izberi poudarno barvo — ta postane barva ozadja in roba v potrjenem stanju.
4. Klikni potrditveno polje v podoknu predogleda, da potrdiš, da tako potrjeno kot nepotrjeno stanje izgledata pravilno.
5. Kopiraj ustvarjen CSS v svojo slogovno predlogo in ga uporabi na katerem koli <input type="checkbox">, ovitem po enaki strukturi kot v predogledni oznaki.

Primer

Vnos

Slog: zaobljena kljukica · Velikost: 24px · Barva: oranžna

Rezultat

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

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

Vnosno polje je vizualno skrito; vidno polje je sosednji <span>, oblikovan s stanjem :checked vnosa, z majhnim zasukanim robom, narisanim kot kljukica, ko je polje potrjeno.

Zakaj skriti izvirno potrditveno polje namesto ga odstraniti

Skušnjava je preskočiti pravi <input> in zgraditi potrditveno polje zgolj iz oblikovanega <div> z upravljalnikom klikov, vendar to izgubi podporo tipkovnice, oddajo obrazca in semantiko bralnika zaslona zastonj. Vzorec, ki ga ustvari to orodje, ohrani pravi vnos potrditvenega polja v oznaki — le vizualno skrit z opacity: 0 in premeščen — tako da ga brskalnik še vedno obravnava kot pravo potrditveno polje na vsak pomemben način, sosednji element pa poskrbi za viden slog.

Trije slogi na kratko

• Zaobljena kljukica: znan vzorec kvadratka s kljukico, najpogostejši za polja obrazcev, potrditvena polja za strinjanje in sezname za več izbir.
• Drsno stikalo: deluje bolj kot takojšnja nastavitev vklop/izklop kot pa polje obrazca — najboljše za nastavitve in zaslone s preferencami, ne za sezname potrditvenih polj.
• Zapolnjen krog: minimalističen izgled, podoben radijskemu gumbu, uporaben, kadar bi kvadratek deloval vizualno pretežko ob zaobljenih elementih vmesnika v bližini.

Ujemanje z ostalim delom vmesnika

Ustvarjena poudarna barva vpliva le na potrjeno stanje — izberi tisto, ki ustreza tvoji blagovni znamki ali barvi gumbov, da potrditveno polje deluje skladno z ostalo stranjo. Kombiniraj jo z enakim border-radius, uporabljenim drugje v vmesniku, za bolj enoten videz.

→ Generator border-radius · Izbirnik barv

Pogosta vprašanja