Ovaj članak će u suštini učiniti istu stvar. ali za radio dugmad. Kao rezultat toga, nakon što koristite materijal iz ovog članka, dobit ćete rezultat sličan primjeru u nastavku.
Kao i sa potvrdnim okvirima, trik se izvodi korištenjem istih pseudo-selektora: označeno i: ne. Slično tome, uobičajeno radio dugme je skriveno, a na njegovom mestu se prikazuje novi, koji ima prezentativniji izgled.
Radio dugmad obično dolaze u nekoliko komada odjednom. Oni vam omogućavaju da napravite izbor unutar obrasca prije podnošenja. U primjere ću također postaviti dva dugmeta. Ako vam treba više ili manje, dodajte ili uklonite bez problema, poštujući neka pravila o kojima ću pisati u nastavku.
Na primjer, imat ćemo dva obična gumba koja će imati sljedeći kod.
Dodali smo oznaku svakom dugmetu koje koristi etiketa. Ako možete bez njih u starim, onda će u novima u svakom slučaju biti potrebni. Bez njih je nemoguće. Za razliku od običnih radio dugmadi, novi takođe moraju imati specificiranu klasu. Na kraju će to izgledati ovako:
Kao što vidite, klasa je dodana myradio. Ovoj klasi će biti dodijeljeni novi CSS stilovi. Također, ne zaboravite na druge standardne parametre radio dugmadi koje je potrebno dodati svim dugmadima.
- id- ID-ovi se dodaju dugmadima tako da im se mogu prikačiti oznake.
- ime- naziv dugmeta. Može se odrediti isto za nekoliko radio dugmadi, tada će biti moguće prebacivanje između dugmadi u obrascu. Ako su imena različita, tada nakon aktiviranja takvog gumba nećete moći poništiti odabir.
- za na etiketi- mora odgovarati id željenog dugmeta. Važna stvar je da se oznaka nalazi odmah iza radio dugmeta.
Nakon što završite s HTML označavanjem dugmadi, možete početi mijenjati njihov izgled. Kao što sam ranije napisao, dodaćemo sve stilove našoj klasi - myradio. Da biste to učinili, morate dodati ovaj dio koda u svoj stilski fajl.
Myradio (vertical-align: top; širina: 17px; visina: 17px; margina: 0 3px 0 0; ) .myradio + label (kursor: pokazivač; ) .myradio:not(checked) (pozicija: apsolutna; neprozirnost: 0; ) .myradio:not(checked) + label ( pozicija: relativna; padding: 0 0 0 35px; ) .myradio:not(checked) + label:before ( sadržaj: ""; pozicija: apsolutna; vrh: -3px; lijevo : 0; širina: 22px ivica: 1px čvrsta pozadina: #FFF ) .myradio:not(checked) + label:after (sadržaj: ""; pozicija: apsolutna; 4px; visina: 16px; #2ebbde 0 1px rgba(0,0,0,.5) .myradio:proizvedeno (prozirnost: 1;) .myradio:focus + label; :before (box-shadow: 0 0 3px 3px rgba(45,182,216,.3); )
Ako već dugo radite sa CSS-om, to je sve i više neće biti koraka. Možete pogledati rezultat i urediti stilove kako bi odgovarali vašim potrebama. Ako ne razumete kod, ali želite da ga nekako raščlanite, pokušaću da objasnim šta on radi. Neću opisivati svaki parametar za to postoje CSS vodiči;
Dugme malo poravnamo za stare Internet verzije Explorer.
Učinimo našu etiketu kliknutim. Kada zadržite pokazivač iznad njega, umjesto strelice će se pojaviti ruka.
Myradio + oznaka (kursor: pokazivač; )
Tu počinje modernizacija dugmadi. Prije svega, naše standardno dugme činimo nevidljivim.
Myradio:nije(čekirano) (pozicija: apsolutna; neprozirnost: 0; )
Postavite pozicioniranje novog dugmeta u odnosu na našu oznaku
Myradio:nije(čekirano) + oznaka (pozicija: relativna; padding: 0 0 0 35px; )
Podešavanje izgleda za neaktivno dugme kada nema tačke u sredini.
Myradio:not(checked) + label:before (sadržaj: ""; pozicija: apsolutna; vrh: -3px; lijevo: 0; širina: 22px; visina: 22px; granica: 1px čvrsta #ccc; radijus granice: 50% pozadina: #FFF;
Ovo izgled tačka/krug koji se pojavljuje u centru kada pritisnete dugme.
Myradio:not(checked) + label:after (sadržaj: ""; pozicija: apsolutna; vrh: 1px; lijevo: 4px; širina: 16px; visina: 16px; radijus granice: 50%; pozadina: #2ebbde; box- senka: umetnuti 0 1px 1px rgba(0,0,0,.5) neprozirnost: 0.2s;
Transparentnost kruga/tačke kada se aktivira. Kao što možete vidjeti u prethodnom pasusu postojao je parametar - neprozirnost: 0;
Myradio: označeno + oznaka: poslije ( neprozirnost: 1; )
Istaknuo sam ovaj parametar kao opcioni. Njegov efekat je senka oko dugmeta pri fokusiranju dok ga pritisnete. U primjeru, ovo su najniža dugmad. Ako vam se ne sviđa, ne morate ga dodavati.
Myradio:focus + label:before (box-shadow: 0 0 3px 3px rgba(45,182,216,.3); )
Kao iu prošlom članku, mislim da ste shvatili značenje i primijetili da ovdje nema ništa posebno komplikovano. Sav kod se može mijenjati u skladu sa vašim idejama, ali bez greške i pridržavanja savjeta.
To je sve, hvala na pažnji. 🙂
Dobar dan svima!Prilagođavanje elemenata obrasca je vjerovatno jedna od najzabavnijih stvari u web dizajnu. Da li je ova aktivnost opravdana, svako odlučuje za sebe, iako je očito da u naše vrijeme dizajneri i layout dizajneri još uvijek tome posvećuju svoje vrijeme i energiju.
Nažalost, samo jedan CSSčesto nedovoljno za lako dizajniranje jednog ili drugog elementa forme. To je vjerovatno razlog zašto mnogi ljudi koriste stvari poput Uniforma za svoje forme. Lično, uvijek pokušavam smanjiti količinu Javascripta koji se koristi u takve svrhe, pa želim govoriti o potpuno izvornom HTML+CSS način prilagođavanja radio dugmadi i okvira za potvrdu.
Siguran sam da većina stručnjaka na Habré-u koristi slične metode, za one koji koriste js biblioteke, npr. Uniforma, nadam se da će ovaj članak biti koristan.
Idemo!
Dakle, postavimo si cilj odmah: dizajnirajte potvrdne okvire i radio dugmad tako da izgledaju kao js magija Uniforma, ali učinite to što jednostavnijim, izvornim u odnosu na HTML I CSS način, a također izbjegavajte korištenje nepotrebnih oznaka, održavajući semantiku. Tako nešto.Glavna ideja je zasnovana na izvornoj "vještini" HTML oznaka etiketa uspostaviti vezu sa određenim elementom forme. To je sve, onda samo šifra.
Označavanje
<ul >
<li >
<input id = "cfirst" type = "checkbox" name = "prvi" označeno skriveno / >
<oznaka za = "prvi" > Označeno polje za potvrdu</oznaka>
</li>
<li >
<input id = "csecond" type = "checkbox" name = "second" hidden / >
<oznaka za = "csecond" > Poništeno polje za potvrdu</oznaka>
</li>
<li >
<input id = "cthird" type = "checkbox" name = "third" skriveno onemogućeno / >
<oznaka za = "ctthird" > Polje za potvrdu Onemogućeno</oznaka>
</li>
<li >
<input id = "clast" type = "checkbox" name = "zadnji" označen skriven onemogućen / >
<oznaka za = "klas" > Označeno polje za potvrdu onemogućeno</oznaka>
</li>
</ul>
<ul >
<li >
<input id = "rfirst" type = "radio" name = "radio" označeno skriveno / >
<oznaka za = "rprvi" > Provjeren radio</oznaka>
</li>
<li >
<input id = "rsecond" type = "radio" name = "radio" hidden / >
<oznaka za = "rsecond" > Neprovjeren radio</oznaka>
</li>
<li >
<input id = "rthird" type = "radio" name = "radio" skriveno onemogućeno / >
<oznaka za = "treći" > Disabled radio</oznaka>
</li>
</ul>
Potpuno izvorna oznaka. Upotreba etiketa zajedno sa unos kao iz udžbenika. Jedina važna stvar je da morate naznačiti id za sve unos I za Za etiketa da ih povežete.
Mislim da su svi primijetili korištenje atributa skriveno koji se kriju unos elemenata, međutim, zahvaljujući vezi sa etiketa, još uvijek možemo manipulirati njima. Kao rezultat dobijamo nešto poput:
Postalo je stvarno dosadno, ali sve funkcionira. Sada samo preostaje da sve ovo uredite kako treba. Da bismo to učinili, koristit ćemo sprite koji se koristi na stranici Uniforma.
Registracija
unos[ type= "checkbox" ] ,
input[ type= "radio" ] (
prikaz: nema;
}
unos[ type= "checkbox" ] + oznaka,
input[ type= "radio" ] + label (
font: 18px bold;
boja : #444 ;
kursor: pokazivač;
}
input[ type= "checkbox" ] + oznaka: :before ,
sadržaj : "" ;
prikaz: inline-block;
visina: 18px;
širina: 18px;
margina : 0 5px 0 0 ;
background-image : url ( uniformjs.com/images/sprite.png) ;
background-repeat : bez ponavljanja;
}
input[ type= "checkbox" ] + label: :before (
background-position : -38px -260px ;
}
input[ type= "radio" ] + label: :before (
background-position : 0px -279px ;
}
input[ type= "checkbox" ] :checked + label: :before (
background-position : -114px -260px ;
}
input[ type= "radio" ] :checked + label: :before (
background-position : -108px -279px ;
}
input[ type= "checkbox" ] :onemogućeno + oznaka: :prije (
background-position : -152px -260px ;
}
input[ type= "checkbox" ] :checked :disabled + label: :before (
background-position : -171px -260px ;
}
input[ type= "radio" ] :onemogućeno + oznaka: :prije (
background-position : -144px -279px ;
}
input[ type= "radio" ] :checked :disabled + label: :before (
background-position : -162px -279px ;
}
Ovdje je sve najjednostavnije. Korištenje pseudo elementa prije kako bismo prikazali naše “virtuelne kontrole” a korisnik nije primijetio zamjenu. Dijelovi sprite-a, mijenjaju se ovisno o stanju unos„A.
Rezultat je nešto poput:
Često je potrebno učiniti da neki html elementi imaju nestandardni izgled.
Ranije je za to kreirano mnogo JavaScript koda, koji je napravio potrebne zamjene. Sada možeš čisti CSS organizuj sve. Štaviše, performanse su zagarantovane u svim modernim pretraživačima.
Zašto bi nam ovo moglo trebati? Postoji mnogo opcija aplikacije, od prekrasnog menija do odabira potrebnih opcija za proizvode za izračunavanje cijene. Na primjer, uzimamo rent-a-car Kharkov i za svaki automobil omogućavamo odabir opcija potrebnih za iznajmljivanje automobila. Ujedno je lijep i jednostavan za korištenje desktop računar i sa mobilnog uređaja.
Dakle, trebamo prikazati standardne ulazne radio stanice u obliku stiliziranih dugmadi.
Kreirajmo mali stilski fajl:
Radio_buttons ( margina: 20px; font: 14px Tahoma; ) .radio_buttons div (float: lijevo; ) .radio_buttons ulaz (pozicija: apsolutna; lijevo: -9999px; ) .radio_buttons label (prikaz: blok; margina: 0 0 0 padding: 8px 10px pozadina: linearni gradijent (do dna, rgba(229,229,229,1) 100%); ; kursor: pokazivač ) .radio_buttons input:checked + label (pozadina: bijela; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .2); ) .radio_buttons div:first-child label ( margin-); left: 0 border-top-left-radius: 4px; radijus: 4px)
I sada možemo primijeniti sve stilove na html markup:
Dakle na jednostavan način postigli smo željeni efekat.
Nastavljamo temu prošle lekcije i u njoj smo je pogledali proces kreiranja regularnih polja za unos teksta. Danas ćemo, kao nastavak, naučiti kako napraviti još jedan element forme - radio dugmad. Takvi gumbi se koriste kada trebate naznačiti jednu od opcija odgovora za izbor, na primjer, „da“ ili „ne“, a ne obje opcije. Kreirajmo ove radio dugmad, uzmimo konačni rezultat zadnje lekcije i nakon polja unos hajde da napravimo novi pasus i napišemo još jednu oznaku a u njemu ukazujemo na sljedeće atribute.
Prvi je tip polja type="radio"- atribut koji specificira tip dugmeta. Drugi je atribut koji specificira ime našeg dugmeta name="vrijeme". Ova vrijednost će biti poslana našem rukovaocu kada posjetitelj klikne na dugme „pošalji“. To jest, ako je ovo radio dugme aktivno, tada će se ova vrijednost poslati rukovaocu vrijednost="da". Kao rezultat toga, na kraju smo dobili ovakvu liniju. Umetanjem ove linije u editor i osvježavanjem pretraživača, dobijamo jednostavno radio dugme.
HTML
Naravno, sada radio dugme izgleda potpuno nejasno, nema pitanja i nema opcije odgovora, odnosno nije jasno šta radi. Stoga, hajde da prvo kreiramo opciju odgovora koristeći oznaku
HTML
Sada naše dugme već ima opciju odgovora (njegovu vrijednost). Sada napravimo još jedno radio dugme sa suprotnim odgovorom "ne". To se radi vrlo jednostavno, kopirajte već kreirano dugme i promijenite riječ "da" u "ne" u njemu i u atributu vrijednost postavite vrijednost br . Važno je imati na umu činjenicu da nazivi radio dugmadi treba da ostanu isti, jer to pokazuje pretraživaču da ta dva dugmeta pripadaju istoj grupi i da se međusobno isključuju.
HTML
Ovdje imamo drugo radio dugme i ako kliknemo na jedno od dugmadi, dugme koje odaberemo je označeno. Odnosno, oni se međusobno isključuju i to se dešava zato što imaju ista imena. Ako navedete dva različita imena, tada će biti moguće odabrati dva gumba odjednom, što logično nije sasvim ispravno.
Pa, sada postavimo samo pitanje za naše dugmad, prije naših dugmadi kreiramo još jedan pasus sa našim pitanjem.
HTML
Pa, sada postoji još jedna zanimljiva stvar koja može biti korisna kada koristite radio dugmad: automatsko aktiviranje dugmeta. Ako sada osvježite stranicu, više od jednog gumba nije aktivno. U početku možemo odrediti koje će dugme biti aktivno za to tako što ćemo ga dodati na dugme; I ovaj atribut se zove provjereno , što na engleskom znači “označeno”. Ovaj atribut je prilično neobičan;
To je sve za radio dugmad. U zbiru dvije lekcije dobili smo sljedeći kod:
HTML
Posljednje ažuriranje: 04.08.2016
Polje za potvrdu
Polje za potvrdu predstavlja element koji može biti u dva stanja: označeno i nepotvrđeno. Potvrdni okvir se kreira pomoću elementa za unos sa atributom type="checkbox":
Proučavane tehnologije
Atribut checked vam omogućava da polje za potvrdu postavite na označeno stanje.
Prekidači
Radio dugmad ili radio dugmad su slični okvirima za potvrdu i također mogu biti u označenom ili nepotvrđenom stanju. Samo za radio dugmad, možete kreirati jednu grupu u kojoj se istovremeno može odabrati samo jedno radio dugme. na primjer:
Da biste kreirali radio dugme, morate navesti atribut type="radio". A sada drugi atribut imena ne ukazuje na ime elementa, već na ime grupe kojoj pripada element radio dugmeta. U ovom slučaju imamo dvije grupe radio dugmadi: rod i tehnologija. Iz svake grupe možemo odabrati samo jedno radio dugme. Opet, da biste označili radio dugme, postavite njegov označeni atribut:
Važan atribut je atribut value, koji, kada se obrazac pošalje, omogućava serveru da odredi koje je radio dugme označeno.