Grupa potvrdnih okvira. Čisti CSS stil potvrdnih okvira i radio gumba s kompatibilnošću za starije preglednike. Učiniti da sve funkcionira

Kako bi se dizajnirali potvrdni okviri i radio gumbi kako to zahtijeva dizajn, danas nije potrebno koristiti JavaScript rješenja (poput mog dodatka), jer. za to se može koristiti samo CSS, i to s kompatibilnošću unatrag za starije preglednike (to jest, ne na račun upotrebljivosti) koji ne podržavaju moderna CSS pravila.

Drugim riječima, u modernim preglednicima potvrdni okviri i radio gumbi izgledat će lijepo, u skladu s predviđenim dizajnom, ali u starijim (ovo se odnosi na Internet Explorer verzija 8 i starije) oni će ostati sa "zadanim" dizajnom, specifičnim za svaki pojedini operativni sustav.

Osim, zadržava mogućnost provjere valjanosti HTML5 stilizirani elementi (što možda nije slučaj kada koristite JavaScript dodatke). U modernim preglednicima njegova je podrška dugo bila norma.

Važne značajke

Da biste uspjeli, važno je uzeti u obzir sljedeće:

Osim, zapravo, same oznake elementa, koju želimo lijepo stilizirati ( ili ), potrebna vam je oznaka , zahvaljujući kojoj element možete prebaciti klikom na tekst, a ne samo na sam element.
Označiti mora biti prije oznake (u ovom slučaju, stanje elementa obrasca se mijenja pomoću atributa for), ili mora biti unutar oznake (u ovom slučaju, atribut for nije potreban, ali je potrebna oznaka omota za tekst).

Trik je u korištenju pseudo-selektora :checked i :not. Istovremeno, sam potvrdni okvir ili radio gumb postaje nevidljiv, a njihova emulacija se provodi pomoću pseudoelemenata: prije i: poslije za oznaku ili prethodno spomenutu oznaku omota.

Stiliziranje za moderne preglednike

Razmotrite obje opcije za mjesto stiliziranog elementa obrasca. Koji je najprikladniji ovisi o vama. Suština ovoga se ne mijenja.

Oznake potvrdnog okvira i radio gumba postavljaju se prije oznake

U HTML kodu izgleda ovako:

Uključujem potvrdni okvir I prebacim radio tipku

Još jednom vam želim skrenuti pažnju - označite nužno treba locirati prije označiti . Ako ih zamijenite, ništa neće raditi.

CSS kod za potvrdni okvir bit će ovako:

Potvrdni okvir ( pozicija: apsolutna; z-indeks: -1; neprozirnost: 0; margina: 10px 0 0 20px; ) .potvrdni okvir + oznaka (pozicija: relativna; padding: 0 0 0 60px; kursor: pokazivač; ) .potvrdni okvir + oznaka :before ( sadržaj: ""; položaj: apsolutna; vrh: -4px; lijevo: 0; širina: 50px; visina: 26px; radijus granice: 13px; pozadina: #CDD1DA; sjena okvira: umetnuti 0 2px 3px rgba( 0,0,0,.2); prijelaz: .2s; ) .potvrdni okvir + oznaka:nakon (sadržaj: ""; položaj: apsolutni; vrh: -2px; lijevo: 2px; širina: 22px; visina: 22px; obrub -radijus: 10px; pozadina: #FFF; sjena okvira: 0 2px 5px rgba(0,0,0,.3); prijelaz: .2s; ) .checkbox:checked + label:before (pozadina: #9FD468; ) .checkbox:checked + label:after (lijevo: 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 kod za radio gumb bit će ovako:

Radio ( pozicija: apsolutna; z-indeks: -1; neprozirnost: 0; margina: 10px 0 0 7px; ) .radio + oznaka (pozicija: relativna; padding: 0 0 0 35px; kursor: pokazivač; ) .radio + oznaka :before (sadržaj: ""; položaj: apsolutni; vrh: -3px; lijevo: 0; širina: 22px; visina: 22px; obrub: 1px čvrsta #CDD1DA; granica-radijus: 50%; pozadina: #FFF; ) . radio + oznaka:nakon ( sadržaj: ""; položaj: apsolutni; vrh: 1px; lijevo: 4px; širina: 16px; visina: 16px; radijus obruba: 50%; pozadina: #9FD468; sjena okvira: umetnuti 0 1px 1px rgba(0,0,0,.5); neprozirnost: 0; prijelaz: .2s; ) .radio:checked + label:after (prozirnost: 1; ) .radio:focus + label:before (box-shadow: 0 0 0 3px rgba(255,255,0,.7); )

Sa svojstvima položaja, z-indeksa i neprozirnosti klasa .checkbox i .radio, vizualno skrivamo izvorne elemente dok ih držimo na istom mjestu gdje bi bili stilizirani elementi. A uz pomoć margine ih malo pomičemo kako bi poruka HTML5 validacije izgledala skladno. Ovisno o dizajnu potvrdnog okvira i radio gumba, ovo se uvlačenje može prilagoditi.

Oznake potvrdnog okvira i radio gumba nalaze se unutar oznake

HTML kod u ovom slučaju bi bilo:

Uključujem potvrdni okvir

I prebacim radio tipku

Po analogiji s prethodnom verzijom - oznaka nužno treba locirati prije oznake s klasom .checkbox__text i .radio__text .

CSS kod za potvrdni okvir bit će ovako:

Unos potvrdnog okvira ( pozicija: apsolutna; z-indeks: -1; neprozirnost: 0; margina: 10px 0 0 20px; ) .checkbox__text ( pozicija: relativna; padding: 0 0 0 60px; kursor: pokazivač; ) .checkbox__text:prije ( sadržaj: ""; položaj: apsolutni; vrh: -4px; lijevo: 0; širina: 50px; visina: 26px; radijus obruba: 13px; pozadina: #CDD1DA; sjena okvira: umetnuti 0 2px 3px rgba(0,0 ,0,.2); prijelaz: .2s; ) .checkbox__text:after (sadržaj: ""; položaj: apsolutni; vrh: -2px; lijevo: 2px; širina: 22px; visina: 22px; radijus obruba: 10px; pozadina: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); prijelaz: .2s; ) :checked + .checkbox__text:after (lijevo: 26px; ) .checkbox input:focus + . potvrdni okvir__text:prije (sjena okvira: umetnuti 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255.255.0.7); )

CSS kod za radio gumb bit će ovako:

Radio ulaz ( pozicija: apsolutna; z-indeks: -1; neprozirnost: 0; margina: 10px 0 0 7px; ) .radio__text ( pozicija: relativna; padding: 0 0 0 35px; kursor: pokazivač; ) .radio__text:prije ( sadržaj: ""; položaj: apsolutni; vrh: -3px; lijevo: 0; širina: 22px; visina: 22px; obrub: 1px čvrst #CDD1DA; radijus obruba: 50%; pozadina: #FFF; ) .radio_text:after ( sadržaj: ""; položaj: apsolutna; vrh: 1px; lijevo: 4px; širina: 16px; visina: 16px; radijus obruba: 50%; pozadina: #9FD468; sjena okvira: umetnuti 0 1px 1px rgba(0, 0,0,.5); neprozirnost: 0; prijelaz: .2s; ) .radio ulaz: označeno + .radio__text:nakon (prozirnost: 1; ) .radio ulaz:fokus + .radio__text:prije (sjena okvira: 0 0 0 3px rgba(255,255,0,.7); )

Stilovi su ovdje isti kao u prethodnoj metodi, samo što se primjenjuju na druge selektore.

Stiliziranje za starije preglednike

CSS kod za potvrdni okvir. U komentarima na kod dodao sam objašnjenja u vezi s preglednicima:

/* Prvo odredite stilove za IE8 i starije verzije, tj. ovdje smo malo oplemenjuju standardni checkbox. */ .checkbox ( vertical-align: top; širina: 17px; visina: 17px; margina: 0 3px 0 0; ) /* Ovo je za sve preglednike osim vrlo starih koji ne podržavaju plus selektore. Pokazujemo da se oznaka može kliknuti. */ .checkbox + label ( kursor: pokazivač; ) /* Sljedeće dolazi stil potvrdnog okvira u modernim preglednicima, kao i IE9 i novijim. Zbog činjenice da stariji preglednici ne podržavaju :not i :checked selektore, svi sljedeći stilovi neće raditi u njima. U ovom slučaju, označeno je bez dvotočke ispred, iz nekog razloga radi na taj način. */ .checkbox:not(checked) (pozicija: apsolutna; z-indeks: -1; neprozirnost: 0; margina: 10px 0 0 20px; ) .checkbox:not(checked) + label (pozicija: relativna; padding: 0 0 0 60px; ) .checkbox:not(checked) + label:before (sadržaj: ""; položaj: apsolutni; vrh: -4px; lijevo: 0; širina: 50px; visina: 26px; radijus obruba: 13px; pozadina : #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); prijelaz: .2s; ) .checkbox:not(checked) + label:after (sadržaj: ""; položaj: apsolutni ; vrh: -2px; lijevo: 2px; širina: 22px; visina: 22px; radijus obruba: 10px; pozadina: #FFF; sjena okvira: 0 2px 5px rgba(0,0,0,.3); prijelaz: .2s; ) .checkbox:checked + label:before (pozadina: #9FD468; ) .checkbox:checked + label:after (lijevo: 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 kod za radio gumb:

Radio ( okomito poravnanje: vrh; širina: 17px; visina: 17px; margina: 0 3px 0 0; ) .radio + oznaka (kursor: pokazivač; ) .radio:nije (označeno) (pozicija: apsolutna; z-indeks: -1; neprozirnost: 0; margina: 10px 0 0 7px; ) .radio:nije(označeno) + oznaka (pozicija: relativna; padding: 0 0 0 35px; ) .radio:nije(označeno) + oznaka:prije ( sadržaj : ""; položaj: apsolutni; vrh: -3px; lijevo: 0; širina: 22px; visina: 22px; obrub: 1px čvrst #CDD1DA; radijus granice: 50%; pozadina: #FFF; ) .radio:not( označeno) + oznaka:nakon ( sadržaj: ""; položaj: apsolutni; vrh: 1px; lijevo: 4px; širina: 16px; visina: 16px; radijus obruba: 50%; pozadina: #9FD468; sjena okvira: umetnuti 0 1px 1px rgba(0,0,0,.5); neprozirnost: 0; prijelaz: .2s; ) .radio:checked + label:after (prozirnost: 1; ) .radio:focus + label:before (box-shadow : 0 0 0 3px rgba(255,255,0,.7); )

Primjeri

Ovako se to radi na tako lak način. Zahvaljujući ovoj metodi, možete stilizirati potvrdne okvire i radio gumbe koristeći CSS onako kako želite.

Želim vam dobrodošlicu na moj blog, dragi čitatelji zainteresirani za izradu web stranica. Danas ću vam pokazati cool trik koji će vam omogućiti da napravite cool potvrdne okvire koji su puno ljepši od zadanih html ponuda. Pokazat ću vam kako se dizajn okvira radi u css-u. Drugim riječima, pokazat ću vam kako napraviti lijepe potvrdne okvire (checkbox) na css-u, odnosno kvačice.

Početna oznaka

Dakle, trebamo početi dodavanjem koda u html koji će prikazati naše potvrdne okvire, kao i oznake za njih (oznaku), ova polja moraju biti povezana zajedno tako da kada kliknete na oznaku, možete označiti okvir .

Izbor 1 Izbor 2 Izbor 3

Pa ću malo komentirati. Imamo tri para: polje za potvrdu i oznaku za njega. Svako polje dobiva svoj identifikator, oznaka je pridružena atributu for, gdje je napisano ime identifikatora koji se povezuje. Do sada sve na stranici izgleda ovako, odnosno ovo je uobičajeni izgled potvrdnih okvira. Sada ćemo to promijeniti.

Uklanjamo unos, raspoređujemo raspone

Dakle, sada moramo sakriti uobičajene potvrdne okvire sa stranice.

Unos (
prikaz:nema;
}

Sada moramo nekako urediti nova polja. Stilizirat ćemo elemente raspona budući da su unutar oznake.

Unos + raspon oznake (
display:inline-block;
širina:40px;
margin-desno: 10px;
visina:40px;
vertical-align:middle;
obrub: 5px puna zelena;
kursor:pokazivač;
radijus granice: 5px
}

Ovim selektorom smo odabrali sve raspone u oznakama koji se nalaze u kodu odmah nakon unosa s tipom potvrdnog okvira. Tako će se ukras primijeniti na naše raspone. Dajemo im tip blok-linije, određenu širinu i visinu te padding udesno tako da tekst ne pristaje čvrsto.

Učiniti da sve funkcionira

Sada to trebate napraviti tako da kada kliknete unutar raspona, odnosno kada odaberete neku opciju, u njega se automatski stavi kvačica. Da bih to učinio, prvo sam pronašao odgovarajuću ikonu s kvačicom na Internetu (mora biti u png formatu), smanjio je na veličinu našeg polja. Sada ostaje umetnuti sljedeći kod:

Unos: označeno + raspon oznake (
background:url(btn.png) bez ponavljanja;
}

Sada sve radi! Pokušajte kliknuti i vidjet ćete da se pojavljuje lijepa kvačica kada je odaberete. Moja slika je bila u istoj mapi kao i css datoteka i zvala se btn.png , otuda i unos.

Dakle, što radi naš čarobni unos: checked + label span selector? U biti, pregledniku govori sljedeće: kada je bilo koji od potvrdnih okvira označen, primijenite pozadinsku sliku na raspone u oznakama. To je to, sve je jednostavno, radili smo bez skripti, praveći lijepe potvrdne okvire na čistom css-u. Napišite u komentarima ako nešto nije jasno.

Minut vaše pažnje: Svi želimo postaviti naše stranice na pouzdan hosting. Analizirao sam stotine domaćina i pronašao najboljeg - HostIQ Na mreži postoje stotine pozitivnih recenzija o tome, prosječna ocjena korisnika je 4,8 od 5. Neka vaše stranice budu dobre.

Potvrdni okvir u HTML obliku ili "kvačicu" daje oznaka ulazni, koji ima vrstu potvrdni okvir.

Kvačica označava slaganje ili neslaganje. Ako je potvrdni okvir označen, tada preglednik šalje varijablu s imenom polja na poslužitelj. Ako je odsutan, tada preglednik ne šalje ništa. Stoga atribut vrijednost ne može se smatrati obveznim.

Ako postoji potreba da potvrdni okvir bude prisutan prema zadanim postavkama, tada morate dodati atribut u oznaku provjereno. To će izgledati ovako:

A ovako izgleda potvrdni okvir u pregledniku:

Prisutnost potvrdnog okvira ne znači da se od prisutnih mora odabrati jedan element. S tim u vezi, ako postoji nekoliko potvrdnih okvira u jednom obliku, onda im treba dati različita imena.

Šifra za obrazac dat na početku članka bit će kako slijedi:

Što se naziva tiče, u profesionalnom okruženju polje se zove "checkbox".

Zahvaljujući CSS3, možemo postići gotovo bilo koji učinak koji nam je potreban na ekranu. U ovom vodiču pogledat ćemo kako možemo stilizirati potvrdne okvire i radio gumbe.

Input:checked + label:before (sadržaj: "\2022"; boja: #f3f3f3; veličina fonta: 30px; poravnanje teksta: središte; visina linije: 18px; )

Sada kada pritisnemo radio gumb, u glavnom sivom krugu trebao bi se pojaviti mali bijeli krug.

Potvrdni okviri za oblikovanje

Sada prijeđimo na oblikovanje potvrdnih okvira. Prvo, sakrijmo element ponovo:

Unos (prikaz: nema;)

Budući da uklanjamo zadani prikaz potvrdnog okvira s pseudoelementom :before, samo ćemo dodati obrub:

Oznaka potvrdnog okvira:prije (granični radijus: 3px;)

Zatim dodajemo simbol kvačice koji će se pojaviti kada se klikne na potvrdni okvir. Učinimo to po analogiji s radio krugom. Trebamo li ovaj put pretvoriti HTML znak? ✓.

Input:checked + label:before (sadržaj: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; boja: #f3f3f3; text-align: center ; visina reda: 15px;)

Na kraju, ovo je ono što bismo trebali dobiti:

Rezultati

U ovom vodiču pogledali smo metodu koju možete koristiti za prikaz radio gumba i potvrdnih okvira koji su vam potrebni. Budući da smo koristili CSS3, ova tehnika će raditi samo u preglednicima koji podržavaju ovu tehnologiju. Kako biste postigli slične rezultate u starijim preglednicima, možete koristiti odgovarajuće

Ovaj vodič će vas upoznati HTML potvrdne okvire i naučiti vas kako ih rukovati u PHP-u.

Obrazac s jednim potvrdnim okvirom

Napravimo jednostavan obrazac s jednim potvrdnim okvirom.

U PHP skripti (datoteka checkbox-form.php) moguće je pročitati vrijednost polja pomoću niza $_POST. Ako je $_POST["formWheelchair"] postavljeno na DA, tada je odabran potvrdni okvir. Ako potvrdni okvir nije odabran, varijabla $_POST["formWheelchair"] nije postavljena.

Evo primjera obrade obrasca u PHP-u:

Varijabla $_POST["formWheelchair"] postavljena je na DA jer je atribut vrijednosti ulazne oznake "DA" .

Imajte na umu da svi potvrdni okviri imaju isti naziv (formDoor). Jedno ime govori da su svi potvrdni okviri povezani. Uglate zagrade označavaju da će sve vrijednosti biti dostupne iz istog niza. To jest, $_POST["formDoor"] neće vratiti string, kao u gornjem primjeru, umjesto toga će vratiti niz koji sadrži vrijednosti potvrdnih okvira koje je odabrao korisnik.

Na primjer, ako označim sve potvrdne okvire, $_POST["formDoor"] će vratiti niz (A,B,C,D,E) . U donjem primjeru dobivamo i prikazujemo sve vrijednosti u nizu.

Prazna funkcija korisna je u slučaju da korisnik nije ništa odabrao. Ako niz nije prazan, brojimo broj odabranih potvrdnih okvira pomoću funkcije count i sve vrijednosti ispisujemo pomoću for petlje.

Ako je potvrdni okvir "Acorn Building" odabran, tada će niz sadržavati vrijednost "A".

Provjera je li odabran određeni potvrdni okvir

Često želite provjeriti je li odabran određeni potvrdni okvir. Za to možete koristiti sljedeću funkciju:

Funkcija IsChecked($chkname,$value) (if(!empty($_POST[$chkname])) (foreach($_POST[$chkname] kao $chkval) (if($chkval == $value) ( vrati istinito; ) ) ) vrati false;)

Sada je dovoljno samo pozvati funkciju IsChecked(chkboxname, value). Na primjer:

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