U članku je predstavljeno nekoliko trikova koje možda niste znali i koje će vam biti od koristi u svom dizajnu.
1. Slika kao pozadina koja nestaje kada unesete tekst.
Možete dodati pozadinska slika kao i svaki drugi element. U ovom slučaju, podrazumevani stil za tekstualnu oblast se menja, odnosno ivica debljine 1px se menja u zakošenu ivicu. Popravljam eksplicitna indikacija granica.
Textarea (pozadina: url(images/benice.png) centar centar bez ponavljanja; granica: 1px čvrsta #888; )
Pozadinska slika može uticati na čitljivost teksta. Stoga, pozadinska slika mora biti uklonjena kada je fokus primljen i vraćen ako je tekstualno područje ostalo bez teksta. Na primjer, korištenjem jQueryja to se može učiniti ovako:
$("textarea") .focus(function() ( $(this).css("background", "none"); )) .blur(function() ( if ($(this).value == "" ) ( $(this).css("background", "url(images/benice.png) centar centar bez ponavljanja"); ) ));
2. Čuvar mjesta u HTML5
HTML5 je uveo novi atribut pod nazivom placeholder . Vrijednost ovog atributa je prikazana u tekstualni element i nestaje kada se fokus primi, kao i u slučaju kada se unese tekst u element.
HTML5 čuvar mjesta je podržan u sljedećim pretraživačima: Safari 5, Mobile Safari, Chrome 6 i Firefox 4 alpha.
3. Čuvar mjesta, podrška za HTML5 za starije pretraživače koji koriste jQuery
Najlakši način da provjerite podržava li atribut pretraživač je da provjerite pomoću javaScript-a:
Funkcija elementSupportsAttribute(element, atribut) ( var test = document.createElement(element); return (atribut u testu); );
Zatim možete napisati kod koji će se pokrenuti ako pretraživač ne podržava atribut čuvara mjesta.
If (!elementSupportsAttribute("textarea", "placeholder")) ( // Ako preglednik ne podržava atribut, tada se izvršava jQuery kod $("#example-three") .data("originalText", $( "#example-three ").text()) .css("color", "#999") .focus(function() (var $el = $(ovo); if (this.value == $el. data("originalText" )) ( this.value = ""; ) )) .blur(function() ( if (this.value == "") ( this.value = $(this).data("originalText" ); ) )) ; ) else ( // Ako pretraživač podržava HTML5, onda samo koristite ovu funkciju $("#example-three") .attr("placeholder", $("#example-three").text( )) .text( ""); )
4. Uklonite potez tekstualnog područja
Pregledači na webkit motorima, kao i u FireFoxu 3.6, zaokružuju tekstualno područje kada je fokus. Možete ukloniti ovu strukturu koristeći css svojstvo outline za webkit pretraživače. Za FireFox se koristi svojstvo -moz-appearance, ili jednostavno možete postaviti element na ivicu ili pozadinu.
Textarea (outline: none; -moz-appearance: none; border: 1px solid #999; /* postavljanje ovog svojstva će također ukloniti potez u FireFoxu */)
5. Zabrana promjene veličine
Webkit pretraživači dodaju vizuelni element u tekstualno područje u donjem desnom uglu koji omogućava promenu veličine oblasti teksta. Ako želite ukloniti ovu funkciju, onda morate koristiti sljedeće css svojstvo:
Textarea (promjena veličine: ništa;)
6. Dodavanje mogućnosti promjene veličine
jQuery UI vam omogućava da dodate mogućnost promjene veličine tekstualnog područja. Ovo radi za sve pretraživače i zamenjuje podrazumevano ponašanje za webkit pretraživače. Da biste koristili ovu funkciju, morate uključiti jquery.ui i napisati sljedeći kod:
$("textarea").resizable();
7. Promijenite veličinu da odgovara sadržaju
James Padolsey je napisao zgodnu jQuery skriptu koja vam omogućava da automatski promijenite veličinu tekstualnog područja kako bi se uklopio u njegov sadržaj. Čini se da ovaj dodatak više nije dostupan, ali možete koristiti ovaj na primjer. Dodatak sadrži puno postavki, ali najlakši način za korištenje je:
$("textarea").autoResize();
8.Nowrap
Kako se riječi ne bi premotavale u nove redove, za sve elemente se koristi css svojstvo white-space, što ne radi sa textarea. Tekstualno područje mora koristiti atribut premotavanja.
9. Uklonite trake za pomicanje u IE
IE prikazuje vertikalnu traku za pomicanje za sve tekstualne površine. Možete ih sakriti pomoću overflow: hidden , ali u ovom slučaju se neće prikazati kada se sadržaj poveća. Stoga je ispravnije koristiti sljedeći pristup:
Textarea ( overflow: auto; )
U ovom slučaju, traka za pomicanje neće biti prikazana kada se cijeli tekst postavi u tekstualno područje, ali će se prikazati ako je potrebno.
Možete vidjeti primjere za članak.
Dosta kopija front-end programera je već razbijeno zbog problema sa stilizovanjem polja za unos. unos. Suština problema je u tome što HTML specifikacija nema stroga pravila o tome kako bi pretraživač trebao prikazati element. Štaviše, za unos ne postoje atributi koji bi omogućili njegovu promjenu izgled, koristeći CSS stilove, možete promijeniti samo izgled njegove ivice i fonta, a korištenjem JavaScripta, iz sigurnosnih razloga, ne možete simulirati klik na ovaj element, što bi izazvalo sistemski prozor da odaberete datoteku * . Ali šta učiniti kada kupac želi responzivnu stranicu s prekrasnim stiliziranim oblicima koji ne mogu bez ovog polja za unos?
* - u vrijeme pisanja ovog članka još uvijek nisam bio svjestan toga moderni pretraživači klik simulacija unos poziva prozor za odabir sistemske datoteke. Puno hvala lutovu na vrijednom komentaru sa linkom na radni primjer sa Pagefesta!
Načini rješavanja problema stiliziranja terena
Za vrijeme postojanja ovog problema (a postoji jako dugo), pronađeno je nekoliko načina za njegovo rješavanje. Ukupno ih ima pet:Metoda broj 1 (najčešća)
Uvjerite kupca da možete živjeti sa standardom unos.Metoda broj 2
Napišite/koristite gotov učitavač datoteka na Flash/Java apletu. Koristi se, na primjer, na habrastorage.orgMetoda broj 3 (o tome će se raspravljati u članku)
Korištenje CSS-a za "maskiranje" standarda unos, učinite ga potpuno transparentnim i postavite ga na mjesto stiliziranog lažnog polja, tako da klik na potonje uzrokuje klik na standardno, i kao rezultat otvara prozor za odabir sistemske datoteke.Metoda broj 4 novo!(o tome će biti riječi u članku)
Mjesto prozirno unos unutar elementa oznake, zajedno sa proizvoljnim stilizovanim inline elementima (osim unosa, dugmeta, odabira i tekstualnog područja, naravno). Klikom na oznaku automatski će se kliknuti na skriveno polje za odabir datoteke. Hvala lampa na vašem vrijednom komentaru!Metoda broj 5 novo!(o tome će biti riječi u članku)
Koristite simulirani klik na skriveno unos koristeći JavaScript. Da, već radi u svim modernim pretraživačima. Hvala još jednom lutov na vašem vrijednom komentaru!UPD: Pažnja, ova metoda nije primjenjiva za pretraživač Internet Explorer! Iako je datoteka odabrana u skrivenom unos, kada se obrazac preda, vrijednost potonjeg će biti "resetirana". Hvala Leonid Frolov na vašem vrijednom komentaru!
Sve četiri posljednje metode, naravno, imaju svoje nedostatke. Značajan nedostatak Flash/Java-rješenja je da su za njegov rad potrebni odgovarajući dodaci, kojih možda nema u pretraživaču korisnika. Veliki nedostatak"kamuflažno" rješenje je da je za njegovu implementaciju potrebno koristiti hakove (o tome razgovaraćemo ispod), a takođe i zato što je bez njega besmisleno Upotreba JavaScripta(Uostalom, morate nekako napraviti razliku između stanja “datoteka nije odabrana” i “fajl odabran” za stilizirano lažno polje, što se ne može učiniti samo na CSS-u). JavaScript rješenje bi općenito bilo jako dobro, ali kako se pokazalo u praksi, nije podržano. Internet pretraživač Explorer, kao što je gore spomenuto. Nedostatak rješenja labela je i dalje korištenje JavaScript-a, međutim, mnogo je bolji od metode "cloaking" i, po mom mišljenju, sada bi se trebao koristiti za rješavanje ovog akutnog problema.
Biciklistička shema
Ključni zadatak je bio stvoriti "gumu" unos koji je na ekranima mobilnih uređaja bilo bi jednostavno dugme za odabir datoteke (na njemu se prikazuje naziv odabrane datoteke), a na širokim ekranima izgledao bi kao tekstualno polje poznato svima + dugme koje se može protegnuti na cijelu širinu prozora:Šematski prikaz elementa na mobilnim uređajima
Šematski prikaz elementa na desktop uređajima
U članku će se raspravljati o tri najnoviji načini stiliziranje polja za odabir datoteke. Dakle, uzimajući u obzir gornju šemu, početni izgled za metodu "kamuflaže" br. 3 će izgledati ovako (redoslijed podređenih elemenata je važan!):
Mogući izgled metode pomoću elementa labele:
Mogući izgled za JavaScript rješenje (isto kao i izgled za "cloaking" metodu):
"Vuci, prase!" ili stilovi za "kamuflažni" način
Kako čitatelj ne bi stekao pogrešan utisak da je svaka vrijednost CSS svojstva koja se koristi u članku od velike važnosti (tzv. „magični brojevi“), dogovorićemo se da one koje možete bezbedno promeniti u skladu sa vašim potrebama označimo sa komentar/* primjer */
Dogovor? Fino! Počnimo s stiliziranjem našeg lažnog polja za odabir datoteke s njegovim div "omotačem". .file_upload:
File_upload( pozicija: relativna; prelijevanje: skriveno; veličina fonta: 1em; /* primjer */ visina: 2em; /* primjer */ visina reda: 2em /* isto što i visina */ )
- svojstvo pozicije je postavljeno u odnosu na div .file_upload mogao bi ga apsolutno pozicionirati podređeni elementi, a svojstvo overflow je da sakrije sve što iz nekog razloga ne stane u naš omot (a postoji takva stvar, ali o tome kasnije). Na širokim ekranima, naše prekrasno polje i dugme treba da budu prikazani u jednom redu - postavićemo za poslednje fiksna širina i float: desno, a za prvi, malo padding:
File_upload > button( float: desno; širina: 8em; /* primjer */ visina: 100% ) .file_upload > div( padding-left: 1em /* primjer */ )
Budući da želimo da tekstualno polje bude skriveno na mobilnim uređajima, a postoji samo jedno dugme za odabir fajla, moramo postaviti medijski upit:
@medijski samo ekran i (maks. širina: 500px)( /* primjer */ .file_upload > div( display: nema ) .file_upload > button( širina: 100% ) )
Sada, zabavni dio ovu metodu! Morate napraviti standard unos potpuno proziran, i proširite ga rastegnite do veličine "wrapper" div .file_upload. Da bismo implementirali potonje, primjenjujemo hakiranje u obrascu apsolutno pozicioniranje i svojstvo transformacije CSS 3, s kojim ćemo element povećati, na primjer, 20 puta (da, ovo je najčešće " magični broj»):
.file_upload input( pozicija: apsolutna; lijevo: 0; vrh: 0; širina: 100%; visina: 100%; transformacija: skala(20); razmak između slova: 10em; /* IE 9 popravak */ -ms-transform : scale(20); /* IE 9 popraviti */ neprozirnost: 0; kursor: pokazivač )
Kao što možete vidjeti iz gornjeg CSS isječka, IE 9 je zahtijevao dodatne štake. To je zbog činjenice da ovaj pretraživač kada se klikne na tekstualno polje, ne poziva prozor za odabir sistemske datoteke, ali ljubazno nudi da se "izbriše" ime već odabranog, što je simbolizirano treptanjem tekstualni kursor. Stoga je za njega dodatno postavljen veliki razmak između slova, što povećava gumb elementa na veličinu div .file_upload. Također napominjem da je z-indeks u ovaj slučaj nije navedeno, jer element dolazi zadnji"potomak" u markupu odabranom od samog početka.
Na primjeru desktopa firefox pretraživač, sada naše prilagođeno polje za odabir datoteke za različite veličine prozori izgledaju ovako:
"Sve genijalno je jednostavno!" ili stilova za metodu oznake
Osnovni stilovi primijenjeni na tekstualno polje i dugme, za ovu metodu su slični onima o kojima je već bilo reči:File_upload( prikaz: blok; pozicija: relativna; prelivanje: skriveno; veličina fonta: 1em; /* primjer */ visina: 2em; /* primjer */ visina reda: 2em /* isto kao i visina */ ) .file_upload .button, .file_upload > mark( display: blok; kursor: pokazivač /* primjer */ ) .file_upload .button( float: desno; box-sizing: border-box; -moz-box-sizing: border-box; širina : 8em; /* primjer */ visina: 100%; poravnanje teksta: centar /* primjer */ ) .file_upload > mark (pozadina: transparentna; /* primjer */ padding-left: 1em /* primjer */ )
Međutim, sada nema potrebe koristiti hack sa "razvlačenjem" transparenta unos:
File_upload input( pozicija: apsolutna; vrh: 0; neprozirnost: 0)
"Kako radi?" ili stilova za JavaScript rješenje
Budući da je originalni izgled za ovu metodu je izabran isto kao i kod "maskiranja", stilovi za dugme i tekstualno polje za obe metode su takođe isti (sa izuzetkom, možda, svojstva pokazivača kursora, koja će se, u ovom slučaju, primeniti na dugme i polje za tekst). U istom stilu unos možete uzeti isti onaj koji je korišten u metodi koristeći element labele, ali je bolje umjesto svojstva neprozirnosti koristiti vidljivost:File_upload ulaz( pozicija: apsolutna; vrh: 0; vidljivost: skrivena)
Treba više stilova!
Naravno, u ovako primitivnom obliku, polje za odabir fajla teško da će nikome odgovarati, pa ćemo dodati dodatne stilove koji će dugme za odabir datoteke učiniti, recimo, ljubičastim, dodati sjene itd. Ne zaboravite da dodate i naš stil za dugme kada je kursor na njemu, stil za pritisnuto dugme, kao i da dodate stil za ceo element kada ima fokus (primeniće se pomoću JavaScript-a):/* Uljepšavanje */ .file_upload( border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 0 5px rgba(0,0,0,0.1); prijelaz: box-shadow 0.1s linear ) .file_upload.focus( box-shadow: 0 0 5px rgba(0,30,255,0.4) ) .file_upload > button( background: #7300df; prijelaz: pozadina 0.2s; granica: 1px solid rgba(0,0,0,0.1 ); border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); border-radius: 2px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) umetnuti, 0 1px 2px rgba(0, 0, 0, 0.05); boja: #fff; sjena teksta: #6200bd 0 -1px 0; prelijevanje: skriveno; razmak: nowrap; text-overflow: ellipsis ) .file_upload:hover > button( background: #6200bd; text-shadow: #5d00b3 0 -1px 0 ) .file_upload:active > button( background: #5d00b3; box-shadow: 0 0 3px rgba(0,0,0,0.3) umetnuti )
Sada naše polje za odabir fajla izgleda ovako:
Treba mi još štaka!
Budući da pravimo potpuno polje za odabir datoteke, moramo se pobrinuti da se može udobno popuniti s tastature (za metodu "maskiranja", fokus je sada prvo postavljen na stilizirano dugme, a zatim do skrivenog unos, koji nije vidljiv). Za ovo, naravno, koristimo JavaScript. Da ne bih pisao mnogo koda, dozvoliću sebi da koristim popularnu jQuery biblioteku. Zatim, za metodu "kamuflaže":var wrapper = $(".file_upload"), inp = wrapper.find("input"), btn = wrapper.find("button"), lbl = wrapper.find("div"); btn.focus(function()(inp.focus())); // Štake za:focus stil: inp.focus(function()(wrapper.addClass("focus"); )).blur(function()(wrapper.removeClass("focus"); ));
Za metodu koja koristi oznaku, možete ukloniti dio koda koji je odgovoran za prisilno prebacivanje fokusa s gumba na unos(jer tamo uopće nemamo dugme, već raspon).
Za metodu čija je suština simulacija klika na unos, trebate, zapravo, dodati ovu imitaciju:
// Da, radi! btn.add(lbl).click(function()( inp.click(); )); i također prilagodite kod za postavljanje klase .fokus, nakon što je prethodno uklonjen fragment odgovoran za prisilni prijenos fokusa:
// Štake za:focus stil: btn.focus(function()(wrapper.addClass("focus"); )).blur(function()(wrapper.removeClass("focus"); ));
Polje za unos je i dalje ostalo "mrtvo" - pri odabiru datoteke, ime potonjeg nije bilo nigdje prikazano. Vrijeme je da popravite i ovo:
Var file_api = (window.File && window.FileReader && window.FileList && window.Blob) ? true: false; inp.change(function()( var file_name; if(file_api && inp[ 0 ].files[ 0 ]) file_name = inp[ 0 ].files[ 0 ].name; inače file_name = inp.val().replace( "C:\\fakepath\\", ""); if(! file_name.length) return; if(lbl.is(":visible"))(lbl.text(file_name); btn.text("Select") ); )else btn.text(ime_datoteke); )).change();
- ako pretraživač podržava File API, tada se naziv datoteke određuje pomoću njega, u suprotnom se uklanja iz skrivene vrijednosti unos. Za mobilne uređaje, kada je element jedno dugme, na njemu se prikazuje naziv odabrane datoteke.
Čini se da je sve što je potrebno već napisano. A evo i figurica! Ako odaberete datoteku pomoću polja "mobilni", a zatim povećate veličinu prozora i prenesete element na "desktop", tada će tekstualno polje ostati "No file selected" - potrebno je ažurirati element svaki put kada se prozor otvori je promijenjena veličina:
$(window).resize(function()( $(".file_upload input").triggerHandler("change"); ));
I šta smo završili?
Rezultirajuće stilizirano polje za odabir datoteke uspješno je testirano za sve tri metode u sljedećim pretraživačima:- FireFox 22.0 (Linux, Windows)
- Opera 12.16 (Linux, Windows)
- Internet Explorer 9
- Chromium 27.0 (Linux)
- Apple Safari (iOS 6.3.1)
- Android pretraživač (Android 2.3.6)
- android firefox
Od prednosti svih pristupa razmatranih u članku, mogu se razlikovati sljedeće glavne:
- Blic se ne koristi.
- Element se može lako stilizirati koristeći CSS koristeći moderne tehnologije adaptivni dizajn.
- Polje se može popuniti i pomoću tastature.
Od glavnih nedostataka:
- Potreba za korištenjem JavaScripta (odnosi se na sve metode).
- Korištenje CSS hakova za "maskiranje" puta.
- Potreba za pisanjem dodatnih štaka za polje sa atributom višestruko(odnosi se na sve metode).
- Ne cross-browser - sve metode ne podržavaju IE 8, a također morate koristiti CSS svojstva "pregledača" da podržite ostale "stare".
- JavaScript rješenje ne podržavaju svi Internet verzije Explorer, kao i neke starije verzije drugih popularni pretraživači(iako ih skoro niko više ne koristi).
Koji od tri elegantna načina za kreiranje stilizovanog unos izabrati za svakodnevnu upotrebu- ti odluci. Moj izbor je metoda oznake (iako ima nesemantički izgled).
Radni primjeri sve tri metode mogu se vidjeti na CodePen-u.
Upoznajte se s novim i starim selektorima koje možete koristiti za stiliziranje unosa u formu na osnovu toga da li su polja obavezna, dobro popunjena itd., predlaže Jonathan Harrel. Predstavljamo vam prilagođeni prijevod njegovog članka.
Opšte je poznato za upotrebu css stilovi Obrasci su oduvijek bili lukavi, ali postoji nekoliko malo korištenih selektora koji nam daju puno stilskih opcija za polja za unos i okolne elemente. Neki od njih su relativno novi, dok drugi postoje već duže vrijeme.
Možete vidjeti primjer njihove upotrebe.
:placeholder-show
Prvi selektor je relativno nov i još nije u potpunosti podržan od strane pretraživača. Ali čini se da bi se to prilično lako moglo iskoristiti kao poboljšanje u budućnosti. Ovaj selektor nam daje mogućnost da odredimo da li je čuvar mjesta trenutno vidljiv korisniku. Ovo može biti korisno ako želimo dinamički sakriti i prikazati oznaku povezanu s ulazom.
Ovdje sakrivam oznaku dok korisnik ne počne kucati u unos, skrivajući rezervirano mjesto. Za izgled etikete koristim prelep efekat tranzicija. Zapamtite, da bi ovo funkcioniralo, oznaka mora doći NAKON unosa.
Koristite ovaj birač da označite da polje ima . Ovdje koristim prazan raspon sa klasom teksta pomoći i dinamički stavljam neki sadržaj sa pseudoelementom ::before. Zapravo, ovo se može uraditi pomoću JavaScript-a, ali sam uključio ovaj primjer da pokažem metodu koristeći čisti CSS.
input:required + .help-text::before (sadržaj: "*Obavezno"; )
U poređenju sa potrebnim, ovaj selektor radi suprotno. Ponovo koristim prazan raspon sa klasom teksta pomoći da prikažem neki mogući tekst ako atribut nedostaje.
Input:optional + .help-text::before (sadržaj: "*Optional"; )
Ovo bi trebalo da bude poznato većini vas, ali je važno da ga imate na umu. Veoma je važno pokazati da li je polje onemogućeno za korisnika.
&:disabled (boja obruba: var(--siva-svetlija); boja pozadine: var(--siva-najsvetlija); boja: var(--siva-svetlija); )
:samo za čitanje
Unos s atributom samo za čitanje mora proći nešto drugačiju vrijednost od . Dobro je da postoji takav selektor za ovu svrhu.
ulaz:samo za čitanje (boja obruba: var(--siva-svjetlija); boja: var(--siva); kursor: nije dozvoljeno; )
:validan
Dok će se većina provjere valjanosti obrasca obaviti sa JavaScript, možemo iskoristiti prednosti HTML5 i za provjeru valjanosti obrasca i za oblikovanje polja za unos. Ovaj selektor nam daje mogućnost stiliziranja bilo kojeg unosa koji trenutno prolazi ugrađena pravila validacije pretraživača.
Ovdje pišem kod za svg da koristi svojstvo background-image da prikaže kvačicu u polju za unos.
Input: valid ( border-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg width="45px" height="34px" viewBox="0 0 45 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg stroke=" none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg transform="translate%28-56.000000, -59.000000%29" fill="%232EEC96"%3E%3Cpoly pointsgon = "70.1468531 85.8671329 97.013986 59 100.58042 62.5664336 70.1468533 93 56 78.8531469 59.5663"% 3E% 3c / poligon% 3e% 3c / g% 3e% 3c / svg% 3e% 0a ");)
Ovaj selektor provjerava da li unos NE prolazi ugrađena pravila validacije pretraživača (na primjer, ako ulazna adresa Email ne sadrži pravu e-poštu).
I opet, dodajem kod za svg da prikaže "X" u polju za unos.
Input:invalid ( border-color: var(--color-error); background-image: url("data:image/svg+xml,%3Csvg width="30px" height="30px" viewBox="0 0 30 30" verzija="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg stroke=" none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg transform="translate%28-128.000000, -59.000000%29" fill="%23F44336"%3E%3Cpoligon bodova = "157.848404 61.9920213 145.980053 73.8603723 157.848404 85.7287234 154.856383 88.7207447 142.988032 76.8523936 131.119681 88.7207447 128,12766 85,7287234 139,996011 73,8603723 128,12766 61,9920213 131,119681 59 142,988032 70,8683511 154,856383 59"% 3E% 3C / poligon% 3E% 3C / g% 3E% 3C / g% 3E% 3C / svg%3E%0A"); )
Također možete postaviti neke testne poruke za svaku tip unosa, koristeći span sa klasom teksta pomoći i pseudoelementom ::before.
input:invalid + .help-text::before (sadržaj: "Morate unijeti važeći email." )
:u dometu/:izvan opsegu
Ovi selektori određuju da li je vrijednost polje broja unutar specificiranih minimalnih/maksimalnih vrijednosti.
(vrijednost mora biti između 1 i 10) input:out-of-range + .help-text::before (sadržaj: "Izvan raspona"; )
Vjerovatno ste upoznati sa ovim selektorom. Omogućava primjenu prilagođeni stilovi na potvrdne okvire i radio dugmad. Moja tehnika stiliziranja polja za potvrdu uključuje kreiranje inline elementa i postavljanje oznake nakon unosa.
Vizuelno sakrijem unos tako da nestane iz vidokruga, ali se i dalje može kliknuti. Zatim stiliziram label::prije da izgleda kao polje za potvrdu i label::nakon da izgleda kao polje za potvrdu. Koristim selektor da pravilno stilizujem ova dva pseudo-elementa.
&:checked + label::before (boja pozadine: var(--color-primary); ) &:checked + label::after (prikaz: blok; pozicija: apsolutna; vrh: 0,2rem; lijevo: 0,375rem; širina: 0,25 rem; visina: 0,5 rem; ivica: puna bijela; širina obruba: 0 2px 2px 0; transformacija: rotirati (45 stupnjeva); sadržaj: ""; )
