Članak predstavlja nekoliko trikova za koje možda niste znali, a koji će vam biti korisni u vašem razvoju.
1. Slika kao pozadina koja nestaje prilikom unosa teksta.
Možete dodati pozadinska slika baš kao i svaki drugi element. U ovom slučaju, zadani stil za textarea mijenja se iz obruba debljine 1px u ukošeni obrub. Ovo je popravljeno eksplicitna naznaka granica.
Tekstualno područje ( pozadina: url(images/benice.png) središte središte bez ponavljanja; obrub: 1px jednobojno #888; )
Pozadinska slika može utjecati na čitljivost teksta. Stoga se pozadinska slika mora ukloniti prilikom primanja fokusa i vratiti ako tekstualno područje ostane bez teksta. Na primjer, koristeći jQuery 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) center center no-repeat"); ) ));
2. Rezervirano mjesto u HTML5
HTML5 ima novi atribut koji se zove rezervirano mjesto. Vrijednost ovog atributa prikazana je u element teksta i nestaje pri primanju fokusa, kao i pri unosu teksta u element.
HTML5 rezervirano mjesto podržano je u sljedećim preglednicima: Safari 5, Mobile Safari, Chrome 6 i Firefox 4 alpha.
3. Rezervirano mjesto, HTML5 s podrškom za starije preglednike koji koriste jQuery
Najlakši način da provjerite podržava li atribut preglednik je da provjerite pomoću javaScripta:
Function elementSupportsAttribute(element, attribute) ( var test = document.createElement(element); return (atribut u testu); );
Zatim možete napisati kod koji će se aktivirati ako preglednik ne podržava atribut rezerviranog mjesta.
If (!elementSupportsAttribute("textarea", "placeholder")) ( // Ako preglednik ne podržava atribut, tada se jQuery kod izvršava $("#example-three") .data("originalText", $( "#example-three ").text()) .css("color", "#999") .focus(function() ( var $el = $(this); if (this.value == $el. data("originalText" )) ( this.value = ""; ) )) .blur(function() ( if (this.value == "") ( this.value = $(this).data("originalText" ); ) )) ; ) else ( // Ako preglednik podržava HTML5, jednostavno upotrijebite ovu značajku $("#example-three") .attr("placeholder", $("#example-three").text( )) .tekst( ""); )
4. Uklonite crtu tekstualnog područja
Preglednici na webkit motorima, kao i FireFox 3.6, ocrtavaju tekstualno područje kada je u fokusu. Ovaj obris možete ukloniti pomoću svojstva obrisa css za webkit preglednike. Za FireFox koristite svojstvo -moz-appearance ili možete jednostavno postaviti element na rub ili pozadinu.
Textarea ( outline: none; -moz-appearance: none; border: 1px solid #999; /* postavljanje ovog svojstva također će ukloniti obris u FireFoxu */ )
5. Zabrana promjene veličine
Webkit preglednici dodaju vizualni element tekstualnom području u donjem desnom kutu koji vam omogućuje promjenu veličine tekstualnog područja. Ako želite ukloniti ovu značajku, tada morate koristiti sljedeće css svojstvo:
Textarea (promjena veličine: ništa;)
6. Dodavanje mogućnosti promjene veličine
jQuery UI omogućuje vam dodavanje mogućnosti promjene veličine tekstualnom području. Ovo radi za sve preglednike, a za web-kit preglednike nadjačava zadano ponašanje. Kako biste koristili ovu značajku, trebate spojiti jquery.ui i napisati sljedeći kod:
$("textarea").promjenjiva veličina();
7. Promijenite veličinu kako bi odgovarao sadržaju
James Padolsey napisao je praktičnu jQuery skriptu koja vam omogućuje da automatski promijenite veličinu tekstualnog područja kako bi odgovaralo njegovom sadržaju. Čini se da ovaj dodatak više nije dostupan, ali možete koristiti ovaj, na primjer. Dodatak sadrži mnoge postavke, ali najlakši način za korištenje je:
$("textarea").autoResize();
8.Nowrap
Kako bi se izbjeglo prelamanje riječi u nove retke, svi elementi koriste svojstvo CSS razmaka, koje ne radi s textarea. Za textarea trebate koristiti atribut wrap.
9. Uklanjanje klizača u IE
IE prikazuje okomitu traku za pomicanje za sva tekstualna područja. Možete ih sakriti koristeći overflow: hidden, ali u ovom slučaju neće biti prikazani kada se sadržaj poveća. Stoga je ispravnije koristiti sljedeći pristup:
Textarea (overflow: auto; )
U tom slučaju traka za pomicanje neće biti prikazana kada je sav tekst postavljen u tekstualno područje, ali će se prikazati ako je potrebno.
Možete vidjeti primjere za članak.
Dosta primjeraka front-end developera već je pokvareno zbog problema stiliziranja polja za unos ulazni. Srž problema je u tome što HTML specifikacija nema stroga pravila koja određuju kako bi ovaj element trebao biti prikazan u pregledniku. Štoviše, za ulazni ne postoje atributi koji bi vam omogućili da ga promijenite izgled, korištenjem CSS stilova možete promijeniti samo izgled njegovog obruba i fonta, a korištenjem JavaScripta, iz sigurnosnih razloga, ne možete simulirati klik na ovaj element, što bi uzrokovalo prozor sustava za odabir datoteke * . Ali što učiniti kada kupac želi responzivnu web stranicu s prekrasnim stiliziranim formama koje ne mogu bez ovog polja za unos?
* - u vrijeme pisanja ovog članka još nisam znao što je već u svemu moderni preglednici simulirani klik na ulazni poziva prozor za odabir sistemske datoteke. Veliko hvala lutovu na vašem vrijednom komentaru s vezom na radni primjer s Pagefesta!
Načini rješavanja problema stiliziranja polja
Otkad ovaj problem postoji (a postoji jako dugo) pronađeno je nekoliko načina za njegovo rješavanje. Ukupno ih je pet:Metoda br. 1 (najčešća)
Uvjerite kupca da možete živjeti sa standardom ulazni.Metoda br. 2
Napišite/koristite gotov program za učitavanje datoteka na Flash/Java apletu. Koristi se, primjerice, na habrastorage.orgMetoda br. 3 (raspravljat će se u članku)
Koristite CSS da "prikrijete" standard ulazni, učinite ga potpuno prozirnim 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 br. 4 novi!(o tome će se raspravljati u članku)
Stavite prozirno ulazni unutar elementa oznake, zajedno s proizvoljnim stiliziranim inline elementima (osim unosa, gumba, odabira i tekstnog područja, naravno). Klik na oznaku automatski će dovesti do klika na skriveno polje za odabir datoteke. Hvala lampa na vrijednom komentaru!Metoda br. 5 novi!(o tome će se raspravljati u članku)
Koristite simulirani klik na skriveno ulazni koristeći JavaScript. Da, ovo već radi u svim modernim preglednicima. Još jednom hvala lutov na vašem vrijednom komentaru!UPD: Pažnja, ova metoda nije primjenjiva za preglednik Internet Explorer! Iako je datoteka odabrana kao skrivena ulazni, kada se obrazac podnese, vrijednost potonjeg će biti "resetirana". Hvala LeonidFrolov na vašem vrijednom komentaru!
Sve četiri posljednje metode, naravno, imaju svoje nedostatke. Značajan nedostatak Problem s Flash/Java rješenjima je taj što njihov rad zahtijeva odgovarajuće dodatke, koji možda neće biti dostupni u pregledniku korisnika. Veliki nedostatak"Kamuflažno" rješenje je da za njegovu implementaciju trebate koristiti hakove (o ovome pričati ćemo ispod), a također i zato što je besmislen bez koristeći JavaScript(uostalom, morate nekako razlikovati stanja "datoteka nije odabrana" i "datoteka odabrana" za stilizirano lažno polje, što je nemoguće učiniti samo s CSS-om). Rješenje u JavaScriptu općenito bi bilo vrlo dobro, ali, kako se pokazalo u praksi, nije podržano Internet preglednik Explorer, kao što je gore spomenuto. Nedostatak rješenja koje koristi labelu je isto korištenje JavaScripta, međutim, puno je bolje od metode "maskiranja" i, po mom mišljenju, trebalo bi ga sada koristiti za rješavanje ovog akutnog problema.
Dijagram bicikla
Ključni zadatak bio je stvoriti “gumu” ulazni, koji je na ekranima Mobilni uredaji bila bi jednostavna tipka za odabir datoteke (na njoj se ispisuje naziv odabrane datoteke), a na širokim ekranima bi izgledala kao svima poznato tekstualno polje + tipka koja se može protezati cijelom širinom prozor:Shematski prikaz elementa na mobilnim uređajima
Shematski prikaz elementa na stolnim uređajima
Ovaj članak govori o tri najnovije metode stiliziranje polja za odabir datoteke. Dakle, uzimajući u obzir gornju shemu, početni izgled za metodu "kamuflaže" br. 3 izgledat će ovako (redoslijed podređenih elemenata je važan!):
Mogući izgled metode pomoću elementa oznake:
Mogući izgled za rješenje u JavaScriptu (isti kao i izgled za metodu “kamuflaže”):
“Vuci, Praščiće!” ili stilovi za metodu "kamuflaže".
Kako bismo spriječili čitatelja da stekne pogrešan dojam da je svaka vrijednost CSS svojstva korištena u članku od velike važnosti (tzv. "magični brojevi"), pristajemo označiti komentarom one koji se mogu sigurno promijeniti kako bi odgovarali vašim potrebama/* primjer */
Dogovoren? Sjajno! Počnimo stilizirati naše polje za odabir lažne datoteke s njegovim "omotačem" - div .file_upload:
File_upload( position: relative; overflow: hidden; font-size: 1em; /* example */ height: 2em; /* example */ line-height: 2em /* isto kao visina */ )
- svojstvo position postavljeno je tako da u odnosu na div .file_upload bilo ga je apsolutno moguće pozicionirati dječji elementi, a svojstvo overflow služi za skrivanje svega što iz nekog razloga ne stane u naš omot (a postoji i takvo što, ali o tome kasnije). Na širokim ekranima, naše lijepo polje i gumb trebaju biti prikazani u jednom retku - postavimo ga za potonje fiksna širina i float: desno, a za prvi - mali 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, ostavljajući samo gumb za odabir datoteke, moramo postaviti medijski upit:
@media only screen and (max-width: 500px)( /* example */ .file_upload > div( display: none) .file_upload > button( width: 100% ) )
Pa, sada - zabavni dio ovu metodu! Potrebno je napraviti standard ulazni potpuno proziran i proširite ga na veličinu "omotača" div .file_upload. Da bismo implementirali potonje, primjenjujemo hack u obrascu apsolutno pozicioniranje i CSS 3 transform svojstva, s kojima ćemo povećati element npr. 20 puta (da, ovo je najčešći “ čarobni broj»):
.file_upload input( pozicija: apsolutna; lijevo: 0; gore: 0; širina: 100%; visina: 100%; transformacija: skala(20); razmak između slova: 10em; /* IE 9 popravak */ -ms-transform : scale(20); /* IE 9 fix */ neprozirnost: 0; kursor: pokazivač)
Kao što možete vidjeti iz gornjeg CSS isječka, IE 9 zahtijeva neka dodatna podešavanja. To je zbog činjenice da ovaj preglednik kada kliknete na tekstualno polje, ne poziva prozor za odabir sistemske datoteke, već ljubazno nudi "brisanje" naziva već odabrane, što je simbolizirano treptanjem kursor teksta. Stoga mu je dodatno postavljen ogroman razmak između slova, čime se gumb elementa povećava na veličinu diva .file_upload. Također napominjem da z-indeks u u ovom slučaju nije naznačeno, jer element dolazi zadnji“potomak” u oznaci odabranoj od samog početka.
Korištenje primjera radne površine Firefox preglednik, sada naše prilagođeno polje za odabir datoteke za različite veličine prozor izgleda ovako:
“Sve genijalno je jednostavno!” ili stilove za metodu oznake
Osnovni stilovi primijenjeni na polje za tekst i gumb, za ovu su metodu slične onima o kojima smo već raspravljali:File_upload( display: block; position: relative; overflow: hidden; font-size: 1em; /* example */ height: 2em; /* example */ line-height: 2em /* isto kao visina */ ) .file_upload .button, .file_upload > mark( display: block; cursor: pointer /* primjer */ ) .file_upload .button( float: desno; box-sizing: border-box; -moz-box-sizing: border-box; width : 8em; /* primjer */ visina: 100%; poravnanje teksta: središte /* primjer */ ) .file_upload > mark( background: transparent; /* primjer */ padding-left: 1em /* primjer */ )
Međutim, sada nema potrebe koristiti hack za "razvlačenje" transparenta ulazni:
File_upload input (pozicija: apsolutna; vrh: 0; neprozirnost: 0)
"Kako radi?" ili stilove za JavaScript rješenje
Budući da je izvorni izgled za ovu metodu odabrano isto kao i kod "maskiranja", stilovi za gumb i tekstno polje za obje metode također su isti (osim, možda, za svojstvo kursor: pokazivač, koje će se u ovom slučaju primijeniti na gumb i tekstualno polje). Stil je ulazni možete uzeti isti onaj koji je korišten u metodi pomoću elementa oznake, ali je bolji u njemu svojstva neprozirnosti koristi vidljivost:File_upload input (pozicija: apsolutna; vrh: 0; vidljivost: skriveno)
Trebate više stilova!
Naravno, u tako primitivnom obliku, polje za odabir datoteke vjerojatno neće nikome odgovarati, pa ćemo dodati dodatne stilove koji će gumb za odabir datoteke učiniti, recimo, ljubičastim, dodati sjene itd. Također ne zaboravimo dodati vlastiti stil za gumb kada kursor prijeđemo preko njega, stil za pritisnuti gumb, a također ćemo dodati stil za cijeli element kada je u fokusu (ovo će se primijeniti pomoću JavaScripta ):/* Čineći ga lijepim */ .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( pozadina: #7300df; prijelaz: pozadina 0,2 s; obrub: 1px solid rgba(0,0,0,0.1) ); boja obruba: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); polumjer obruba: 2px; sjena okvira: 0 1px 0 rgba(255, 255, 255, 0.2) umetnuto, 0 1px 2px rgba(0, 0, 0, 0.05); boja: #fff; sjena teksta: #6200bd 0 -1px 0; preljev: skriven; 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) umetak )
Sada naše polje za odabir datoteke izgleda ovako:
Trebam više štaka!
Budući da izrađujemo potpuno polje za odabir datoteke, moramo se pobrinuti da se može udobno ispuniti s tipkovnice (za metodu "maskiranja", fokus je sada prvo postavljen na stilizirani gumb, a zatim onom skrivenom ulazni, što se ni na koji način vizualno ne očituje). Za to, naravno, koristimo JavaScript. Kako bih izbjegao pisanje puno koda, uzet ću slobodu i koristiti popularnu biblioteku jQuery. Zatim, za metodu "kamuflaže":Var wrapper = $(".file_upload"), inp = wrapper.find("ulaz"), btn = wrapper.find("gumb"), lbl = wrapper.find("div"); btn.fokus(funkcija())( inp.fokus() )); // Štake za stil:focus: inp.focus(function())( wrapper.addClass("focus"); )).blur(function())( wrapper.removeClass("focus"); ));
Za metodu koja koristi labelu, možete ukloniti dio koda odgovoran za prisiljavanje fokusa s gumba na ulazni(budući da tu uopće nemamo dugme, nego raspon).
Za metodu čija je bit simulacija klika na ulazni, zapravo trebate dodati upravo ovu imitaciju:
// Da, radi! btn.add(lbl).click(function())( inp.click(); )); i također prilagoditi kod za postavljanje klase .usredotočenost, prethodno uklonivši fragment odgovoran za prisilni prijenos fokusa:
// Štake za stil:focus: btn.focus(function())( wrapper.addClass("focus"); )).blur(function())( wrapper.removeClass("focus"); ));
Polje za unos i dalje je ostalo "mrtvo" - prilikom odabira datoteke, naziv potonje nije prikazan nigdje. Vrijeme je da se i ovo popravi:
Var file_api = (window.File && window.FileReader && window.FileList && window.Blob) ? točno netočno; inp.change(function())( var file_name; if(file_api && inp[ 0 ].files[ 0 ]) file_name = inp[ 0].files[ 0].name; else file_name = inp.val().replace ( "C:\\fakepath\\", ""); if(! file_name.length) return; if(lbl.is(":visible"))( lbl.text(file_name); btn.text("Odaberi " ); )else btn.text(file_name); )).change();
- ako preglednik podržava File API, tada se naziv datoteke određuje pomoću njega, inače se izrezuje iz skrivene vrijednosti ulazni. Za mobilne uređaje, kada je element jedan gumb, 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 "mobilno", a zatim povećate veličinu prozora i prenesete element na "radnu površinu", tada će "Datoteka nije odabrana" ostati u tekstualnom polju - trebate ažurirati element svaki put kada promijenite veličina prozora:
$(prozor).resize(funkcija())( $(".file_upload input").triggerHandler("promjena"); ));
I što smo na kraju dobili?
Dobiveno polje za odabir stilizirane datoteke uspješno je testirano za sve tri metode u sljedećim preglednicima:- FireFox 22.0 (Linux, Windows)
- Opera 12.16 (Linux, Windows)
- Internet Explorer 9
- Chromium 27.0 (Linux)
- Apple Safari (iOS 6.3.1)
- Android preglednik (Android 2.3.6)
- Android FireFox
Od prednosti svih pristupa razmatranih u članku, mogu se identificirati sljedeće glavne:
- Flash se ne koristi.
- Element se može jednostavno stilizirati koristeći CSS korištenjem moderne tehnologije adaptivni dizajn.
- Polje se može popuniti i pomoću tipkovnice.
Od glavnih nedostataka:
- Potreba za korištenjem JavaScripta (odnosi se na sve metode).
- Korištenje CSS hakova za "maskiranje" stvari.
- Potreba za pisanjem dodatnih štaka za polje s atributom višestruki(odnosi se na sve metode).
- Ne-cross-browser - sve metode nemaju podršku za IE 8, a također morate koristiti svojstva CSS-a "preglednika" za podršku ostatku "starih".
- JavaScript rješenje ne podržavaju svi Internetske verzije Explorer, kao i neke starije verzije drugih popularni preglednici(iako ih gotovo nitko više ne koristi).
Koji od tri su dva elegantna načina za stvaranje stiliziranog ulazni izabrati za svakodnevnu upotrebu- Ti odluči. Moj izbor je metoda koja koristi label (iako ima nesemantički izgled).
Radni primjeri sve tri metode mogu se pronaći na CodePen.
Istražite nove i stare selektore koje možete koristiti za stiliziranje elemenata unosa obrazaca na temelju toga jesu li polja obavezna, pravilno ispunjena itd., predlaže Jonathan Harrell. Predstavljamo vam prilagođeni prijevod njegova članka.
Dobro se zna što treba koristiti CSS stilovi Obrasci su uvijek bili nezgodni, ali postoji nekoliko malo korištenih selektora koji nam daju značajne mogućnosti dizajna za polja za unos i okolne elemente. Neki od njih su relativno novi, dok su drugi dostupni već dulje vrijeme.
Možete vidjeti primjer njihove upotrebe.
:placeholder-prikazano
Prvi birač relativno je nov i preglednici ga još ne podržavaju u potpunosti. Ali čini se da bi se to moglo vrlo lako koristiti kao poboljšanje u budućnosti. Ovaj birač nam daje mogućnost da odredimo je li rezervirano mjesto trenutno vidljivo korisniku. Ovo može biti korisno ako želimo dinamički sakriti i prikazati oznaku povezanu s unosom.
Ovdje skrivam oznaku dok korisnik ne počne upisivati unos, skrivajući rezervirano mjesto. Za prikaz oznake koristim prekrasan učinak tranzicija. Zapamtite, da bi ovo radilo, oznaka mora doći NAKON unosa.
Koristite ovaj selektor da označite da polje ima atribut. Ovdje koristim prazan raspon s klasom teksta pomoći i dinamički postavljam neki sadržaj pomoću pseudoelementa ::before. Zapravo, to se može učiniti s JavaScriptom, ali uključio sam ovaj primjer da pokažem metodu koja koristi čisti CSS.
input:required + .help-text::before ( content: "*Required"; )
U usporedbi s potrebnim, ovaj selektor radi suprotno. Ponovno koristim prazan raspon s klasom teksta za pomoć kako bih prikazao neki mogući tekst ako atribut nedostaje.
Input:optional + .help-text::before ( content: "*Optional"; )
Ovaj bi trebao biti poznat većini vas, ali važno je zapamtiti. Vrlo je važno pokazati je li polje zaključano za korisnika.
&:disabled (border-color: var(--gray-lighter); background-color: var(--gray-lightest); color: var(--gray-light); )
:samo za čitanje
Unos s atributom samo za čitanje trebao bi imati nešto drugačije značenje od . Dobro je da postoji takav selektor za tu svrhu.
input:read-only (border-color: var(--gray-lighter); color: var(--gray); cursor: not-allowed; )
:važi
Iako će većina provjere valjanosti obrasca biti obavljena s koristeći JavaScript, možemo iskoristiti prednosti HTML5 za provjeru valjanosti obrazaca i stiliziranje polja za unos. Ovaj birač daje nam mogućnost stiliziranja bilo kojeg unosa koji trenutno prolazi ugrađena pravila provjere valjanosti preglednika.
Ovdje pišem kod za svg koji koristi svojstvo background-image za prikaz kvačice 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" verzija="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg potez=" nijedan" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg transform="translate%28-56.000000, -59.000000%29" fill="%232EEC96"%3E%3Ctočke poligona ="70.1468531 85.8671329 97.013986 59 100.58042 62.5664336 70.1468531 93 56 78.8531469 59.5664336 75.2867133"%3E%3C/poligon%3E%3C /g%3E%3C/g%3E%3C/svg%3E%0A"); )
Ovaj selektor provjerava da li unos NE prolazi ugrađena pravila provjere valjanosti preglednika (na primjer, ako je unesena adresa E-mail ne sadrži pravu e-poštu).
Još jednom dodajem kod za svg za prikaz "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 potez=" nijedan" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg transform="translate%28-128.000000, -59.000000%29" fill="%23F44336"%3E%3Ctočke poligona ="157.848404 61.9920213 145.980053 73.8603723 157.848404 85.7287234 154.856383 88.7207447 142.988032 76.8523936 131.119681 8 8.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 konfigurirati neke poruke za potvrdu za svaku unos tipa, koristeći raspon s klasom teksta pomoći i pseudoelementom ::before.
input:invalid + .help-text::before ( sadržaj: "Morate unijeti valjanu e-poštu." )
:unutar dometa/:izvan dometa
Ovi selektori određuju je li vrijednost brojčano polje unutar navedenih minimalnih/maksimalnih vrijednosti.
(vrijednost mora biti između 1 i 10) input:out-of-range + .help-text::before ( content: "Izvan raspona"; )
Vjerojatno vam je poznat ovaj selektor. Omogućuje primjenu prilagođeni stilovi na potvrdne okvire i radio gumbe. Moja tehnika oblikovanja potvrdnog okvira uključuje stvaranje umetnutog elementa i postavljanje oznake nakon unosa.
Vizualno skrivam unos tako da nestaje iz pogleda, ali se i dalje može kliknuti. Zatim stiliziram label::before da izgleda kao potvrdni okvir i label::after da izgleda kao kvačica. Koristim selektor za stiliziranje ova dva pseudoelementa u skladu s tim.
&:checked + label::before ( background-color: var(--color-primary); ) &:checked + label::after ( display: block; position: absolute; top: 0.2rem; left: 0.375rem; širina: 0,25 rem; visina: 0,5 rem; obrub: puna bijela; širina obruba: 0 2 px 2 px 0; transformacija: rotacija (45 stupnjeva); sadržaj: ""; )
