Skupina potrditvenih polj. Čisti CSS stil potrditvenih polj in izbirnih gumbov z združljivostjo za starejše brskalnike. Naj vse deluje

Za oblikovanje potrditvenih polj in izbirnih gumbov, kot zahteva zasnova, danes ni treba uporabljati rešitev JavaScript (kot je moj vtičnik), ker. za to se lahko uporablja samo CSS in z združljivostjo nazaj za starejše brskalnike (torej ne na račun uporabnosti), ki ne podpirajo sodobnih pravil CSS.

Z drugimi besedami, v sodobnih brskalnikih bodo potrditvena polja in izbirni gumbi videti lepo v skladu z predvideno zasnovo, v starejših pa (to velja za Internet Explorer različice 8 in starejše) bodo ostali s "privzeto" zasnovo, značilno za vsak posamezen operacijski sistem.

poleg tega ohranja zmožnost preverjanja HTML5 stiliziranih elementov (kar morda ne velja pri uporabi vtičnikov JavaScript). V sodobnih brskalnikih je njegova podpora že dolgo običajna.

Pomembne lastnosti

Za uspeh je pomembno upoštevati naslednje:

Razen pravzaprav same oznake elementa, ki jo želimo lepo oblikovati ( oz ), potrebujete oznako , zahvaljujoč kateri lahko element preklapljate s klikom na besedilo in ne samo na sam element.
Oznaka mora biti pred oznako (v tem primeru se stanje elementa obrazca preklopi z atributom for) ali pa mora biti znotraj oznake (v tem primeru atribut for ni potreben, vendar je potrebna oznaka ovoja za besedilo).

Trik je v tem, da uporabite psevdoizbirnika :checked in :not. Hkrati je samo potrditveno polje ali izbirni gumb neviden, njihova emulacija pa se izvede z uporabo psevdoelementov: pred in: po za oznako ali prej omenjeno oznako za ovoj.

Styling za sodobne brskalnike

Upoštevajte obe možnosti za lokacijo oblikovanega elementa obrazca. Kateri je najbolj primeren, je odvisno od vas. Bistvo tega se ne spremeni.

Oznake potrditvenega polja in izbirnega gumba so postavljene pred oznako

V kodi HTML izgleda takole:

Preklopim potrditveno polje In preklopim radijski gumb

Še enkrat želim opozoriti vašo pozornost - označite nujno naj se nahaja prej oznaka . Če jih zamenjaš, ne bo nič delovalo.

Koda CSS za potrditveno polje bo takole:

Potrditveno polje ( položaj: absolutni; z-indeks: -1; motnost: 0; rob: 10px 0 0 20px; ) .potrditveno polje + oznaka (položaj: relativna; odmik: 0 0 0 60px; kazalec: kazalec; ) .potrditveno polje + oznaka :before (vsebina: ""; položaj: absolutno; vrh: -4px; levo: 0; širina: 50px; višina: 26px; polmer obrobe: 13px; ozadje: #CDD1DA; senca polja: vložek 0 2px 3px rgba( 0,0,0,.2); prehod: .2s; ) .potrditveno polje + oznaka:po (vsebina: ""; položaj: absolutno; zgoraj: -2px; levo: 2px; širina: 22px; višina: 22px; obroba -radij: 10px; ozadje: #FFF; senca škatle: 0 2px 5px rgba(0,0,0,.3); prehod: .2s; ) .checkbox:checked + label:before (ozadje: #9FD468; ) .checkbox:checked + label:after (levo: 26px; ) .checkbox:focus + label:before (box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255) ,0,.7);)

CSS koda za izbirni gumb bo takole:

Radio (položaj: absolutni; z-indeks: -1; motnost: 0; rob: 10px 0 0 7px; ) .radio + oznaka (položaj: relativna; odmik: 0 0 0 35px; kazalec: kazalec; ) .radio + oznaka :before (vsebina: ""; položaj: absolutno; zgoraj: -3px; levo: 0; širina: 22px; višina: 22px; obroba: 1px trdna #CDD1DA; polmer obrobe: 50%; ozadje: #FFF; ) . radio + oznaka:after (vsebina: ""; položaj: absolutno; zgoraj: 1px; levo: 4px; širina: 16px; višina: 16px; polmer obrobe: 50%; ozadje: #9FD468; senca polja: vložek 0 1px 1px rgba(0,0,0,.5); motnost: 0; prehod: .2s; ) .radio:preverjeno + label:after (prosojnost: 1; ) .radio:focus + label:before (box-shadow: 0 0 0 3px rgba(255,255,0,.7); )

Z lastnostmi položaja, z-indeksa in motnosti razredov .checkbox in .radio vizualno skrijemo izvirne elemente, hkrati pa jih obdržimo na istem mestu, kjer bi bili stilizirani elementi. In s pomočjo roba jih nekoliko premaknemo, da bo sporočilo o preverjanju HTML5 videti harmonično. Glede na zasnovo potrditvenega polja in izbirnega gumba lahko to zamik prilagodite.

Oznake potrditvenega polja in izbirnega gumba so znotraj oznake

koda HTML v tem primeru bi bilo:

Preklopim potrditveno polje

In preklopim radijski gumb

Po analogiji s prejšnjo različico - oznako nujno naj se nahaja prej oznake z razredoma .checkbox__text in .radio__text .

Koda CSS za potrditveno polje bo takole:

Vnos potrditvenega polja ( položaj: absolutni; z-indeks: -1; motnost: 0; rob: 10px 0 0 20px; ) .checkbox__text (položaj: relativni; padding: 0 0 0 60px; kazalec: kazalec; ) .checkbox__text:before ( vsebina: ""; položaj: absolutno; vrh: -4px; levo: 0; širina: 50px; višina: 26px; polmer obrobe: 13px; ozadje: #CDD1DA; senca polja: vložek 0 2px 3px rgba(0,0 ,0,.2); prehod: .2s; ) .checkbox__text:after (vsebina: ""; položaj: absolutni; vrh: -2px; levo: 2px; širina: 22px; višina: 22px; polmer obrobe: 10px; ozadje: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); prehod: .2s; ) :checked + .checkbox__text:after (levo: 26px; ) .checkbox input:focus + . checkbox__text:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255.255.0.7); )

CSS koda za izbirni gumb bo takole:

Radijski vhod (položaj: absolutni; z-indeks: -1; motnost: 0; rob: 10px 0 0 7px; ) .radio__text (pozicija: relativna; padding: 0 0 0 35px; kazalec: kazalec; ) .radio__text:before ( vsebina: ""; položaj: absolutno; zgoraj: -3px; levo: 0; širina: 22px; višina: 22px; obroba: 1px trdna #CDD1DA; polmer obrobe: 50%; ozadje: #FFF; ) .radio_text:after (vsebina: ""; položaj: absolutno; zgoraj: 1px; levo: 4px; širina: 16px; višina: 16px; polmer obrobe: 50%; ozadje: #9FD468; senca polja: vložek 0 1px 1px rgba(0, 0,0,.5); motnost: 0; prehod: .2s; ) .radio vhod:potrjeno + .radio__text:potem (prosojnost: 1; ) .radio vhod:fokus + .radio__text:pred (box-senca: 0 0 0 3px rgba(255,255,0,.7); )

Tukaj so slogi enaki kot pri prejšnji metodi, le da se uporabljajo za druge izbirnike.

Slog za starejše brskalnike

Koda CSS za potrditveno polje. V komentarjih k kodi sem dodal pojasnila glede brskalnikov:

/* Najprej določite sloge za IE8 in starejše različice, tj. tukaj smo malo oplemenitili standardno potrditveno polje. */ .checkbox ( vertical-align: top; širina: 17px; višina: 17px; rob: 0 3px 0 0; ) /* To velja za vse brskalnike, razen za zelo stare, ki ne podpirajo izbirnikov plus. Pokažemo, da je nalepko mogoče klikniti. */ .checkbox + label (kurzor: kazalec; ) /* Sledi oblikovanje potrditvenega polja v sodobnih brskalnikih, pa tudi v IE9 in novejših. Ker starejši brskalniki ne podpirajo izbirnikov :not in :checked, v njih ne bodo delovali vsi naslednji slogi. V tem primeru je označeno označeno brez dvopičja spredaj, iz nekega razloga deluje tako. */ .checkbox:ni(potrjeno) (položaj: absolutni; z-indeks: -1; motnost: 0; rob: 10px 0 0 20px; ) .checkbox:ni(potrjeno) + oznaka (položaj: relativna; oblazinjenje: 0 0 0 60px; ) .checkbox:ni(potrjeno) + label:before (vsebina: ""; položaj: absolutno; vrh: -4px; levo: 0; širina: 50px; višina: 26px; polmer obrobe: 13px; ozadje : #CDD1DA; senca polja: vložek 0 2px 3px rgba(0,0,0,.2); prehod: .2s; ) .checkbox:not(potrjeno) + label:after (vsebina: ""; položaj: absolutno ; zgoraj: -2px; levo: 2px; širina: 22px; višina: 22px; polmer obrobe: 10px; ozadje: #FFF; senca polja: 0 2px 5px rgba(0,0,0,.3); prehod: .2s; ) .checkbox:preverjeno + oznaka:pred (ozadje: #9FD468; ) .checkbox:potrjeno + oznaka:potem (levo: 26px; ) .checkbox:fokus + oznaka:pred (box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); )

CSS koda za izbirni gumb:

Radio (vertical-align: top; širina: 17px; višina: 17px; rob: 0 3px 0 0; ) .radio + label (kurzor: kazalec; ) .radio:not(checked) (položaj: absolutni; z-index: -1; motnost: 0; rob: 10px 0 0 7px; ) .radio:not(potrjeno) + oznaka (položaj: relativna; padding: 0 0 0 35px; ) .radio:not(potrjeno) + oznaka:pred ( vsebina : ""; položaj: absolutno; zgoraj: -3px; levo: 0; širina: 22px; višina: 22px; obroba: 1px trdna #CDD1DA; polmer obrobe: 50%; ozadje: #FFF; ) .radio:not( označeno) + oznaka:po (vsebina: ""; položaj: absolutno; zgoraj: 1px; levo: 4px; širina: 16px; višina: 16px; polmer obrobe: 50%; ozadje: #9FD468; senca polja: vstavek 0 1px 1px rgba(0,0,0,.5); motnost: 0; prehod: .2s; ) .radio:preverjeno + oznaka:potem ( motnost: 1; ) .radio:fokus + oznaka:pred (box-shadow : 0 0 0 3px rgba(255,255,0,.7); )

Primeri

Tako se to naredi na tako enostaven način. Zahvaljujoč tej metodi lahko s CSS oblikujete potrditvena polja in izbirne gumbe tako, kot želite.

Pozdravljam vas na mojem blogu, dragi bralci, ki vas zanima izdelava spletnih strani. Danes vam bom pokazal kul trik, ki vam bo omogočil ustvarjanje kul potrditvenih polj, ki so veliko lepša od privzetih html ponudb. Pokazal vam bom, kako je zasnova potrditvenega polja narejena v css. Z drugimi besedami, pokazal vam bom, kako narediti čudovita potrditvena polja (checkbox) v css, torej kljukice.

Začetna oznaka

Torej moramo začeti z dodajanjem kode v html, ki bo prikazala naša potrditvena polja, pa tudi oznake zanje (oznaka), ta polja je treba povezati skupaj, tako da lahko ob kliku na oznako potrdite polje .

Izbira 1 Izbira 2 Izbira 3

Torej bom malo komentiral. Imamo tri pare: polje za potrditveno polje in oznako zanj. Vsako polje dobi svoj identifikator, oznaka je povezana z atributom for, kjer je zapisano ime identifikatorja, ki ga je treba povezati. Zaenkrat je vse na strani videti takole, torej je to običajen videz potrditvenih polj. Zdaj ga bomo spremenili.

Odstranimo vnos, uredimo razpone

Torej, zdaj moramo skriti običajna potrditvena polja na strani.

Vnos (
zaslon: brez;
}

Zdaj moramo nekako urediti nova polja. Elemente span bomo oblikovali, ker so znotraj oznake.

Vnos + razpon oznake (
display:inline-block;
širina: 40px;
rob-desno: 10px;
višina: 40px;
navpična poravnava:sredina;
obroba: 5px, zelena;
kazalec: kazalec;
polmer obrobe: 5 slikovnih pik
}

S tem izbirnikom smo izbrali vse razpone v oznakah, ki so v kodi takoj za vnosi z vrsto potrditvenega polja. Tako bo okras nanesen na naše razpone. Damo jim vrsto črte blokov, določeno širino in višino ter oblazinjenje na desno, da se besedilo ne prilega tesno.

Naj vse deluje

Zdaj morate narediti tako, da se ob kliku znotraj razpona, torej ko izberete neko možnost, vanj samodejno postavi kljukica. Da bi to naredil, sem najprej našel ustrezno ikono s kljukico na internetu (mora biti v formatu png), zmanjšal jo na velikost našega polja. Zdaj je treba vstaviti naslednjo kodo:

Vnos: označeno + razpon oznake (
background:url(btn.png) brez ponovitve;
}

Vse deluje zdaj! Poskusite klikniti in videli boste, da se prikaže lepa kljukica, ko jo izberete. Moja slika je bila v isti mapi kot datoteka css in se je imenovala btn.png , od tod tudi vnos.

Kaj torej naredi naš čarobni vnos: izbirnik razpona označeno + oznaka? V bistvu brskalniku pove naslednje: ko je označeno katero koli potrditveno polje, uporabite sliko ozadja za razpone v oznakah. To je to, vse je preprosto, brez skriptov smo naredili čudovita potrditvena polja v čistem css. Napišite v komentarje, če kaj ni jasno.

Minuta vaše pozornosti: Vsi želimo svoja spletna mesta postaviti na zanesljivo gostovanje. Analiziral sem na stotine gostiteljev in našel najboljšega - HostIQ V omrežju je na stotine pozitivnih ocen o njem, povprečna ocena uporabnikov je 4,8 od 5. Naj bodo vaše strani dobre.

Potrditveno polje v obliki HTML ali "potrditveno polje" je podano z oznako vnos, ki ima vrsto potrditveno polje.

Kljukica označuje soglasje ali nestrinjanje. Če je potrditveno polje potrjeno, brskalnik pošlje strežniku spremenljivko z imenom polja. Če je odsoten, torej brskalnik ne pošlje ničesar. Zato atribut vrednost ne more veljati za obvezno.

Če mora biti potrditveno polje privzeto prisotno, morate oznaki dodati atribut preverjeno. Videti bo takole:

In takole izgleda potrditveno polje v brskalniku:

Prisotnost potrditvenega polja ne pomeni, da je treba med prisotnimi izbrati en sam element. V zvezi s tem, če je v eni obliki več potrditvenih polj, jim je treba dati različna imena.

Koda za obrazec na začetku članka bo naslednja:

Kar zadeva ime, se v profesionalnem okolju polje imenuje "potrditveno polje".

Zahvaljujoč CSS3 lahko na zaslonu dosežemo skoraj vsak učinek, ki ga potrebujemo. V tej vadnici si bomo ogledali, kako lahko oblikujemo potrditvena polja in izbirne gumbe.

Vnos:preverjeno + oznaka:pred (vsebina: "\2022"; barva: #f3f3f3; velikost pisave: 30px; poravnava besedila: središče; višina vrstice: 18px; )

Zdaj, ko pritisnemo izbirni gumb, se mora v glavnem sivem krogu pojaviti majhen bel krog.

Potrditvena polja za oblikovanje

Zdaj pa pojdimo na oblikovanje potrditvenih polj. Najprej skrijmo element še enkrat:

Vnos (prikaz: brez;)

Ker bomo odstranili privzeti prikaz potrditvenega polja s psevdoelementom :before, bomo dodali samo obrobo:

Oznaka potrditvenega polja:pred (obrobni polmer: 3px;)

Nato dodamo simbol kljukice, ki se prikaže, ko kliknete potrditveno polje. Naredimo to po analogiji z radijskim krogom. Ali moramo tokrat pretvoriti znak HTML? ✓.

Input:checked + label:before (vsebina: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; barva: #f3f3f3; text-align: center ; višina vrstice: 15px;)

Na koncu bi morali dobiti tole:

Rezultati

V tej vadnici smo si ogledali metodo, ki jo lahko uporabite za prikaz izbirnih gumbov in potrditvenih polj, ki jih potrebujete. Ker smo uporabljali CSS3, bo ta tehnika delovala samo v brskalnikih, ki podpirajo to tehnologijo. Da bi dosegli podobne rezultate v starejših brskalnikih, lahko uporabite ustrezen

Ta vodnik vam bo predstavil potrditvena polja HTML in vas naučijo, kako jih ravnati v PHP.

Obrazec z enim potrditvenim poljem

Ustvarimo preprost obrazec z enim potrditvenim poljem.

V skriptu PHP (datoteka checkbox-form.php) je mogoče prebrati vrednost polja z uporabo matrike $_POST. Če je $_POST["formWheelchair"] nastavljen na DA, je potrditveno polje izbrano. Če potrditveno polje ni izbrano, spremenljivka $_POST["formWheelchair"] ni nastavljena.

Tukaj je primer obdelave obrazca v PHP:

Spremenljivka $_POST["formWheelchair"] je nastavljena na YES, ker je atribut vrednosti vhodne oznake "YES".

Upoštevajte, da imajo vsa potrditvena polja isto ime (formDoor). Eno ime pravi, da so vsa potrditvena polja povezana. Oglati oklepaji označujejo, da bodo vse vrednosti na voljo iz iste matrike. To pomeni, da $_POST["formDoor"] ne bo vrnil niza, kot v zgornjem primeru, namesto tega bo vrnil niz, ki vsebuje vrednosti potrditvenih polj, ki jih je izbral uporabnik.

Če na primer potrdim vsa potrditvena polja, bo $_POST["formDoor"] vrnil niz (A,B,C,D,E) . V spodnjem primeru dobimo in prikažemo vse vrednosti v matriki.

Prazna funkcija je uporabna, če uporabnik ni izbral ničesar. Če matrika ni prazna, preštejemo število izbranih potrditvenih polj s funkcijo count in izpišemo vse vrednosti z zanko for.

Če je izbrano potrditveno polje "Acorn Building", bo matrika vsebovala vrednost "A".

Preverjanje, ali je izbrano določeno potrditveno polje

Pogosto želite preveriti, ali je izbrano določeno potrditveno polje. Za to lahko uporabite naslednjo funkcijo:

Funkcija IsChecked($chkname,$value) (if(!empty($_POST[$chkname])) (foreach($_POST[$chkname] kot $chkval) (if($chkval == $value) ( vrni true; ) ) ) vrni false;)

Zdaj je dovolj samo, da pokličete funkcijo IsChecked(chkboxname, value). Na primer:

If(IsChecked("formDoor","A")) ( //naredi ... )