Ky artikull paraqet disa truke që ndoshta nuk i keni ditur se do t'ju duken të dobishme në dizajnet tuaja.
1. Një imazh si sfond që zhduket kur futni tekst.
Ju mund të shtoni imazhi i sfondit ashtu si çdo element tjetër. Në këtë rast, stili i paracaktuar për zonën e tekstit ndryshohet, përkatësisht kufiri 1px ndryshohet në një kufi të pjerrët. E rregullon tregues i qartë kufiri.
Textarea (sfondi: url (imazhe / benice.png) qendra pa përsëritje; kufiri: 1 px solid # 888;)
Imazhi i sfondit mund të ndikojë në lexueshmërinë e tekstit. Prandaj, imazhi i sfondit duhet të hiqet kur të merret fokusi dhe të kthehet nëse zona e tekstit mbetet pa tekst. Për shembull, duke përdorur jQuery mund të bëhet si kjo:
$ ("textarea") .focus (funksion () ($ (kjo) .css ("sfond", "asnjë");)) .blur (funksion () (nëse ($ (this) .value == "" ) ($ (kjo) .css ("sfondi", "url (imazhe / benice.png) qendra pa përsëritje");)));
2. Vendmbajtësi në HTML5
HTML5 prezanton një atribut të ri të quajtur placeholder. Vlera e këtij atributi tregohet në element teksti dhe zhduket kur merret fokusi, si dhe kur teksti futet në element.
Mbajtësi i vendndodhjes HTML5 mbështetet në shfletuesit e mëposhtëm: Safari 5, Mobile Safari, Chrome 6 dhe Firefox 4 alpha.
3. Placeholder, HTML5 me mbështetje të trashëguar të shfletuesit duke përdorur jQuery
Mënyra më e lehtë për të kontrolluar nëse një atribut mbështetet nga shfletuesi është të kontrolloni me javaScript:
Elementi i funksionitSupportsAttribute (element, atribut) (var test = document.createElement (element); return (atribut në test);
Më pas mund të shkruani kodin që do të aktivizohet nëse shfletuesi nuk e mbështet atributin mbajtës të vendndodhjes.
Nëse (! ElementSupportsAttribute ("textarea", "placeholder")) (// Nëse shfletuesi nuk e mbështet atributin, atëherë kodi jQuery ekzekutohet $ ("# shembull-tre") .data ("Teksti origjinal", $ ( "# shembull-tre ") .tekst ()) .css (" ngjyra "," # 999 ") .fokus (funksion () (var $ el = $ (kjo); nëse (this.value == $ el. data (" originalText " )) (this.value = "";))) .blur (funksioni () (if (this.value == "") (this.value = $ (this) .data ("origjinalText" );))) ;) tjetër (// Nëse shfletuesi mbështet HTML5, atëherë thjesht përdorni këtë veçori $ ("# shembull-tre") .attr ("mbajtës vendi", $ ("# shembull-tre"). teksti ( )) .tekst ("");)
4. Hiqni skicën e zonës së tekstit
Shfletuesit në motorët e uebkit, si dhe në FireFox 3.6, përshkruajnë zonën e tekstit kur është në fokus. Ju mund ta hiqni këtë skicë duke përdorur veçorinë përshkrim css për shfletuesit e uebkit. Për FireFox, përdoret vetia -moz-appearance, ose thjesht mund të vendosni një kufi ose sfond për elementin.
Textarea (skicë: asnjë; -moz-appearance: asnjë; kufi: 1px solid # 999; / * vendosja e kësaj vetie do të heqë gjithashtu skicën në FireFox * /)
5. Ndalimi i ndryshimit të madhësisë
Shfletuesit e uebkit shtojnë një pamje vizuale në zonën e tekstit në këndin e poshtëm djathtas që ju lejon të ndryshoni madhësinë e zonës së tekstit. Nëse dëshironi të hiqni këtë veçori, atëherë duhet të përdorni veçorinë e mëposhtme css:
Textarea (ndryshoni madhësinë: asnjë;)
6. Shtimi i aftësisë për të ndryshuar përmasat
jQuery UI ju lejon të shtoni përmasa të reja në textarea. Kjo funksionon për të gjithë shfletuesit dhe anulon sjelljen e paracaktuar për shfletuesit e ueb-kit. Për të përdorur këtë veçori, duhet të lidhni jquery.ui dhe të shkruani kodin e mëposhtëm:
$ ("textarea") mund të ndryshohet përmasa ();
7. Ndryshoni madhësinë për t'iu përshtatur përmbajtjes
James Padolsey shkroi një skript të dobishëm jQuery që ndryshon automatikisht madhësinë e zonës së tekstit për t'iu përshtatur përmbajtjes së saj. Duket sikur kjo shtojcë nuk është më aty, por ju mund ta përdorni këtë për shembull. Shtojca përmban shumë cilësime, por mënyra më e lehtë për ta përdorur atë është:
$ ("textarea") autoResize ();
8. Nowrap
Për të mos mbështjellë fjalët në rreshta të rinj, për të gjithë elementët përdoret vetia css me hapësirë të bardhë, e cila nuk funksionon me zonën e tekstit. Atributi wrap duhet të përdoret për textarea.
9. Heqja e shiritave të lëvizjes në IE
IE tregon një shirit lëvizës vertikal për të gjitha zonat e tekstit. Mund t'i fshehni duke përdorur tejmbushjen: të fshehura, por në këtë rast nuk do të shfaqet kur përmbajtja zmadhohet. Prandaj, është më e saktë të përdoret metoda e mëposhtme:
Textarea (mbushje: automatik;)
Në këtë rast, shiriti i lëvizjes nuk do të shfaqet kur i gjithë teksti vendoset në zonën e tekstit, por do të shfaqet nëse është e nevojshme.
Ju mund të shihni shembuj për artikullin.
Tashmë shumë kopje të zhvilluesve të frontit janë thyer në lidhje me problemin e stilimit të fushës së hyrjes hyrje... Thelbi i problemit është se nuk ka rregulla strikte në specifikimet HTML se si duhet të shfaqet ky element nga shfletuesi. Për më tepër, për hyrje nuk ofrohen atribute për ta ndryshuar atë pamjen, duke përdorur stilet CSS, mund të ndryshoni vetëm pamjen e kufirit dhe fontit të tij, dhe duke përdorur JavaScript, për arsye sigurie, nuk mund të simuloni një klikim në këtë element, i cili do të shkaktonte dritarja e sistemit për të zgjedhur një skedar * ... Por çfarë duhet bërë kur një klient dëshiron një faqe interneti responsive me forma të bukura të stilizuara, të cilat nuk mund të bëhen pa këtë fushë hyrëse?
* - në kohën e këtij shkrimi, unë ende nuk e dija se çfarë ishte tashmë në të gjitha shfletues modern simuloni klikoni mbi hyrje thërret dritaren e përzgjedhjes së skedarit të sistemit. Shumë faleminderit lutov për komentin e vlefshëm me një lidhje me një shembull pune nga Pagefest!
Mënyrat për të zgjidhur problemin e stilimit të fushës
Gjatë kohës që ky problem ka ekzistuar (dhe ka ekzistuar për një kohë shumë të gjatë), janë gjetur disa mënyra për ta zgjidhur atë. Janë pesë prej tyre në total:Metoda numër 1 (më e zakonshme)
Bindni klientin se është e mundur të jetohet me një standard hyrje.Metoda numër 2
Shkruani / përdorni një ngarkues skedari të gatshëm në aplikacionin Flash / Java. Përdoret, për shembull, në habrastorage.orgMetoda numër 3 (do të diskutohet në artikull)
Përdorni CSS për të "maskuar" standardin hyrje, bëjeni plotësisht transparent dhe vendoseni në vend të fushës së stilizuar të rreme, në mënyrë që klikimi mbi të fundit të shkaktojë një klikim në atë standard dhe, si rezultat, të hapet dritarja e përzgjedhjes së skedarit të sistemit.Metoda numër 4 i ri!(do të diskutohet në artikull)
Vendi transparent hyrje brenda elementit të etiketës, së bashku me elementë të brendshëm të stilizuar arbitrar (me përjashtim të hyrjes, butonit, përzgjedhjes dhe zonës së tekstit, natyrisht). Klikimi në etiketë do të çojë automatikisht në klikimin në fushën e fshehur për zgjedhjen e një skedari. Faleminderit lampa për komentin e vyer!Metoda numër 5 i ri!(do të diskutohet në artikull)
Përdorni klikimin e simuluar në të fshehur hyrje me anë të JavaScript. Po, kjo tashmë funksionon në të gjithë shfletuesit modernë. Edhe një herë faleminderit lutov për komentin e vlefshëm!UPD: Kujdes, kjo metodë nuk është e zbatueshme për shfletuesin Internet Explorer! Edhe pse skedari është zgjedhur në një të fshehur hyrje, kur të dorëzohet formulari, vlera e këtij të fundit do të "rivendoset". Faleminderit LeonidFrolov për komentin e vlefshëm!
Të katër metodat e fundit, natyrisht, kanë të metat e tyre. Disavantazh i rëndësishëm Zgjidhjet Flash / Java janë që për funksionimin e tij nevojiten shtojca të përshtatshme, të cilat mund të mos jenë të disponueshme në shfletuesin e përdoruesit. E metë e madhe Zgjidhja "maskimi" është se për zbatimin e saj është e nevojshme të përdoren hacks (për këtë do të jetë më poshtë), dhe gjithashtu sepse është e pakuptimtë pa duke përdorur JavaScript(në fund të fundit, duhet të bëni disi dallimin midis gjendjeve "skedari nuk është zgjedhur" dhe "skedari është zgjedhur" për një fushë të rreme të stilizuar, gjë që është e pamundur të bëhet vetëm me CSS). Një zgjidhje JavaScript në përgjithësi do të ishte shumë e mirë, por siç doli në praktikë, ajo nuk mbështetet Shfletuesi i internetit Explorer, siç u përmend më lart. Ana negative e zgjidhjes së etiketës është përdorimi i njëjtë i JavaScript, megjithatë, është shumë më i mirë se metoda e "maskuar" dhe, për mendimin tim, duhet të përdoret tani për të zgjidhur këtë problem akut.
Diagrami i biçikletës
Detyra kryesore ishte krijimi i një "gome" hyrje që është në ekrane pajisje celulare do të ishte një buton i thjeshtë për zgjedhjen e një skedari (emri i skedarit të zgjedhur shfaqet në të), dhe në ekranet e gjera do të dukej si një fushë teksti + një buton i njohur për të gjithë, i cili mund të shtrihet në gjerësinë e plotë të dritare:Pamje skematike e një elementi në pajisjet celulare
Pamje skematike e një elementi në pajisjet desktop
Artikulli do të përfshijë tre mënyrat e fundit stilimi i kutisë së përzgjedhjes së skedarit. Kështu, duke marrë parasysh skemën e lartpërmendur, faqosja fillestare për metodën "kamuflazh" # 3 do të duket kështu (rendi i elementeve të fëmijëve është i rëndësishëm!):
Paraqitja e mundshme për metodën duke përdorur elementin e etiketës:
Paraqitja e mundshme për një zgjidhje JavaScript (e njëjtë me paraqitjen për metodën "maskim"):
"Tërhiqe, derrkuc!" ose stile për një mënyrë "kamuflazhi".
Në mënyrë që lexuesi të mos ketë përshtypjen e gabuar se çdo vlerë e vetive CSS të përdorura në artikull ka një rëndësi të madhe (të ashtuquajturit "numrat magjikë"), ne pranojmë të shënojmë ato që mund të ndryshohen në mënyrë të sigurt për t'iu përshtatur nevojave tuaja me një koment/ * shembull * /
Marreveshje? Mirë! Le të fillojmë të stilojmë kutinë tonë të përzgjedhjes së skedarëve të rremë me ndarjen e saj "mbështjellëse". .skedar_ngarkuar:
Ngarkimi_skedari (pozicioni: relative; tejmbushja: i fshehur; madhësia e shkronjave: 1em; / * shembulli * / lartësia: 2em; / * shembulli * / lartësia e rreshtit: 2em / * e njëjtë me lartësinë * /)
- vetia e pozicionit është vendosur në atë mënyrë që në lidhje me div .skedar_ngarkuar mund ta pozicionojë absolutisht elementet fëmijë, dhe prona e tejmbushjes është për të fshehur gjithçka që, për ndonjë arsye, nuk do të futet në mbështjellësin tonë (dhe ka një gjë të tillë, por më shumë për këtë më vonë). Në ekranet e gjera, fusha dhe butoni ynë i bukur duhet të shfaqen në një rresht - ne do ta vendosim për të fundit gjerësi fikse dhe float: djathtas, dhe për të parën ka një mbushje të vogël:
Butoni File_load> (float: djathtas; gjerësia: 8em; / * shembull * / lartësia: 100%) .file_upload> div (mbushje-majtas: 1em / * shembull * /)
Meqenëse duam që fusha e tekstit të fshihet në pajisjet celulare dhe ka mbetur vetëm një buton për zgjedhjen e skedarit, duhet të vendosim pyetje mediatike:
Ekrani vetëm @media dhe (gjerësia maksimale: 500 px) (/ * shembull * / .file_upload> div (ekrani: asnjë) butoni .file_upload> (gjerësia: 100%))
Epo, tani - më argëtuese në kjo metodë! Është e nevojshme të bëhet një standard hyrje plotësisht transparent dhe zgjerojeni për ta shtrirë në madhësinë e "mbështjellësit" div .skedar_ngarkuar... Për të zbatuar këtë të fundit, ne do të aplikojmë një hak në formë pozicionim absolut dhe vetia e transformimit CSS 3, të cilën mund ta përdorim për të zmadhuar elementin, për shembull, 20 herë (po, kjo është më e zakonshme " numër magjik»):
Hyrja .file_upload (pozicioni: absolute; majtas: 0; sipër: 0; gjerësia: 100%; lartësia: 100%; transformimi: shkalla (20); hapësira midis shkronjave: 10em; / * IE 9 fix * / -ms-transform : shkalla (20); / * rregullim IE 9 * / opaciteti: 0; kursori: treguesi)
Siç mund ta shihni nga fragmenti i mësipërm i CSS, nevojiteshin paterica shtesë për IE 9. Kjo për faktin se shfletuesi i dhënë kur klikoni në fushën e tekstit, ajo nuk thërret dritaren e zgjedhjes së skedarit të sistemit, por me mirësi ofron të "fshijë" emrin e atij të zgjedhur tashmë, i cili simbolizohet duke pulsuar kursori i tekstit... Prandaj, një hapësirë e madhe midis shkronjave është vendosur gjithashtu për të, gjë që rrit butonin e elementit në madhësinë e një div .skedar_ngarkuar... Vini re gjithashtu se indeksi z in në këtë rast nuk specifikohet, sepse element shkon e fundit"Fëmija" në shënimin e zgjedhur që në fillim.
Në shembullin e desktopit Shfletuesi FireFox, tani kutia jonë e përzgjedhjes së skedarëve të personalizuar për madhësive të ndryshme Windows duket kështu:
"Çdo gjë e zgjuar është e thjeshtë!" ose stilet për metodën e etiketës
Stilet bazë të aplikuara në fushë teksti dhe butoni, për këtë metodë janë të ngjashme me ato të diskutuara më sipër:Ngarkimi_skedari (ekrani: bllok; pozicioni: relativ; tejmbushja: i fshehur; madhësia e shkronjave: 1em; / * shembulli * / lartësia: 2em; / * shembulli * / lartësia e linjës: 2em / * njësoj si lartësia * /) .file_upload .button, .file_upload> shenjë (ekrani: bllok; kursori: treguesi / * shembull * /) .file_upload .button (float: djathtas; madhësia e kutisë: kufiri-box; -moz-box-sizing: border-box; gjerësia : 8em; / * shembull * / lartësi: 100%; rreshtimi i tekstit: në qendër / * shembull * /) .file_upload> shenjë (sfondi: transparent; / * shembull * / mbushje-majtas: 1em / * shembull * /)
Megjithatë, tani nuk është më e nevojshme të përdoret hakimi me "shtrirje" të transparentit hyrje:
Hyrja e ngarkimit të skedarit (pozicioni: absolut; lart: 0; paqartësia: 0)
"Si punon?" ose stile për një zgjidhje JavaScript
Që nga paraqitja origjinale për kjo metodë u zgjodh njësoj si në "maskim", stilet për butonin dhe fushën e tekstit për të dyja metodat janë gjithashtu të njëjta (përveç, ndoshta, veçorisë së kursorit: treguesi, i cili, në këtë rast, do të zbatohet në butonin dhe fushën e tekstit). Stili është hyrje ju mund të merrni të njëjtin që është përdorur në metodë duke përdorur elementin e etiketës, por është më mirë në vend të vetitë e tejdukshmërisë përdorni dukshmërinë:Hyrja e ngarkimit të skedarit (pozicioni: absolut; lart: 0; dukshmëria: e fshehur)
Nevojiten më shumë stile!
Natyrisht, në një formë kaq primitive, fusha e përzgjedhjes së skedarit nuk ka gjasa t'i përshtatet askujt, kështu që ne do të shtojmë stile shtesë që do ta bëjnë butonin e përzgjedhjes së skedarit, të themi, vjollcë, shtoni hije, etj. Le të mos harrojmë të shtojmë stilin tonë për butonin kur kursori rri pezull mbi të, stilin për butonin e shtypur dhe gjithashtu të shtojmë stilin për të gjithë elementin kur fokusi është mbi të (do të aplikohet duke përdorur JavaScript):/ * Duke e bërë të bukur * / .skedar_ngarkimi (kufiri: 1px solid #cccc; kufiri-rreze: 3px; box-hije: 0 0 5px rgba (0,0,0,0.1); tranzicioni: box-hije 0,1s lineare) .file_upload.focus (box-shadow: 0 0 5px rgba (0,30,255,0.4)) butoni .file_upload> (sfondi: # 7300df; tranzicioni: sfondi 0.2s; kufiri: 1px rgba solide (0,0,0,0.1 ); ngjyra e kufirit: rgba (0,0,0,0,1) rgba (0,0,0,0,1) rgba (0,0,0,0,25); rreze e kufirit: 2 px; hije e kutisë: 0 1 px 0 rgba (255, 255, 255, 0.2) futur, 0 1px 2px rgba (0, 0, 0, 0.05); ngjyra: #fff; tekst-hije: # 6200bd 0 -1px 0; tejmbushje: e fshehur; hapësirë e bardhë: nowrap; text-overflow: elipsis) .file_load: 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) futje)
Tani kutia jonë e përzgjedhjes së skedarit duket si kjo:
Duhen më shumë paterica!
Meqenëse po krijojmë një fushë të plotë për zgjedhjen e një skedari, duhet të kujdesemi që ai të mund të mbushet lehtësisht nga tastiera (për metodën e "maskuar", fokusi është vendosur fillimisht në butonin e stilizuar dhe më pas në e fshehura hyrje, e cila nuk shfaqet vizualisht në asnjë mënyrë). Për këtë, natyrisht, ne përdorim JavaScript. Për të mos shkruar shumë kode, do t'i lejoj vetes të përdor bibliotekën popullore jQuery. Pastaj, për metodën "kamuflazh":Var mbështjellës = $ (". Ngarkimi_skedari"), inp = mbështjellës.gjeni ("hyrje"), btn = mbështjellës.gjeni ("buton"), lbl = mbështjellës.gjeni ("div"); btn.fokus (funksioni () (inp.fokus ())); // Paterica për: stili i fokusit: inp.fokus (funksioni () (mbështjellës.addClass ("fokus");)) Blur (funksioni () (mbështjellës.removeClass ("fokus");));
Për një metodë që përdor një etiketë, mund të hiqni seksionin e kodit përgjegjës për transferimin e detyruar të fokusit nga butoni në hyrje(sepse aty nuk kemi fare buton, por hapësirë).
Për një metodë, thelbi i së cilës është të simulojë një klikim mbi hyrje, në fakt duhet të shtoni këtë imitim:
// Po, funksionon! btn.add (lbl) .click (funksioni () (inp.click ();)); dhe gjithashtu korrigjoni kodin për të vendosur klasën .përqendrimi pas heqjes së fragmentit përgjegjës për transferimin e detyruar të fokusit:
// Paterica për: stili i fokusit: btn.fokus (funksioni () (mbështjellësi.addClass ("fokus");)) Blur (funksioni () (mbështjellës.removeClass ("fokus");));
Fusha e hyrjes mbeti ende "e vdekur" - kur skedari u zgjodh, emri i të fundit nuk u shfaq askund. Është koha për ta rregulluar edhe këtë:
Var file_api = (dritare.Skedari && dritare.FileReader && dritare.Lista e skedarëve && dritare.Blob)? e vërtetë: e rreme; inp.change (funksioni () (var emri i skedarit; nëse (file_api && inp [0] .skedarët [0]) emri i skedarit = inp [0] .skedarët [0] .emri; tjetër emri i skedarit = inp.val (). zëvendësoni ( "C: \\ fakepath \\", ""); nëse (! Emri_skedarit.gjatësia) kthehet; nëse (lbl.is (": i dukshëm")) (lbl.text (emri_skedarit); btn.text ("Zgjidh" );) else btn.tekst (emri_skedarit);)) ndryshimi ();
- nëse shfletuesi mbështet File API, atëherë emri i skedarit përcaktohet duke përdorur atë, përndryshe ai pritet nga vlera e fshehur hyrje... Për pajisjet celulare, kur elementi është një buton i vetëm, emri i skedarit të zgjedhur shfaqet në të.
Duket se gjithçka që kërkohet tashmë është shkruar. Dhe këtu janë figurinat! Nëse zgjidhni një skedar duke përdorur fushën "celular" dhe më pas rritni madhësinë e dritares dhe kaloni elementin në "desktop", atëherë fusha e tekstit do të mbetet "Skedari nuk është zgjedhur" - duhet të përditësoni elementin sa herë që dritarja është ndryshoi përmasat:
$ (dritare) .ndryshimi i madhësisë (funksioni () ($ (". hyrje e ngarkimit të skedarit"). triggerHandler ("ndryshim");));
Dhe çfarë morëm në fund?
Kutia e përzgjedhjes së skedarit të stiluar që rezulton është testuar me sukses për të tre metodat në shfletuesit e mëposhtëm:- FireFox 22.0 (Linux, Windows)
- Opera 12.16 (Linux, Windows)
- Internet Explorer 9
- Chromium 27.0 (Linux)
- Apple Safari (iOS 6.3.1)
- Shfletuesi Android (Android 2.3.6)
- Android FireFox
Nga avantazhet e të gjitha qasjeve të konsideruara në artikull, mund të dallohen këto kryesore:
- Flash nuk është përdorur.
- Elementi mund të stilohet lehtësisht duke përdorur CSS duke përdorur teknologjive moderne Dizajn të përgjegjshëm.
- Fusha mund të plotësohet edhe nga tastiera.
Nga disavantazhet kryesore:
- Nevoja për të përdorur JavaScript (vlen për të gjitha metodat).
- Përdorimi i hakimeve të CSS për një mënyrë "maskimi".
- Nevoja për të shkruar paterica shtesë për një fushë me një atribut të shumëfishta(vlen për të gjitha metodat).
- Jo-shfletues - të gjitha metodave u mungon mbështetja për IE 8, dhe ju gjithashtu duhet të përdorni veçoritë CSS të "shfletuesit" për të mbështetur pjesën tjetër të "të vjetërve".
- Zgjidhja JavaScript nuk mbështetet nga të gjithë Versionet e internetit Explorer, si dhe disa versione më të vjetra të të tjerëve shfletues të njohur(edhe pse pothuajse askush nuk i përdor më ato).
Cila nga tre dy mënyrat elegante për të krijuar një të stilizuar hyrje zgjidhni për përdorimi i përditshëm- ti vendos. Zgjedhja ime është metoda e etiketimit (edhe pse ka një paraqitje josemantike).
Shembujt e punës të të tre metodave mund të gjenden në CodePen.
Shikoni përzgjedhësit e rinj dhe të vjetër që mund të përdorni për të stiluar hyrjet e formave bazuar në nëse fushat janë të nevojshme, të sakta, etj., sugjeron Jonathan Harrell. Ju paraqesim një përkthim të përshtatur të artikullit të tij.
Është e njohur se çfarë të aplikoni Stilet CSS Formularët kanë qenë gjithmonë të ndërlikuar, por ka disa përzgjedhës të papërdorur që na japin opsione të rëndësishme stilimi për fushat e hyrjes dhe elementët përreth. Disa janë relativisht të reja, ndërsa të tjerët kanë qenë rreth e rrotull për mjaft kohë.
Ju mund të shihni një shembull të përdorimit të tyre.
: vendmbajtës-i treguar
Zgjedhësi i parë është relativisht i ri dhe ende nuk mbështetet plotësisht nga shfletuesit. Por duket se mund të përdoret mjaft lehtë si një përmirësim në të ardhmen. Ky përzgjedhës na jep mundësinë për të përcaktuar nëse mbajtësi i vendndodhjes është aktualisht i dukshëm për përdoruesin. Kjo mund të jetë e dobishme nëse duam të fshehim dhe shfaqim në mënyrë dinamike etiketën e lidhur me hyrjen.
Këtu e fsheh etiketën derisa përdoruesi të fillojë të shkruajë në hyrje, duke fshehur mbajtësin e vendndodhjes. Për pamjen e etiketës, përdor efekt i bukur tranzicionit. Mbani mend, që kjo të funksionojë, etiketa duhet të shkojë PAS hyrjes.
Përdorni këtë përzgjedhës për të treguar se një fushë ka një atribut. Këtu po përdor një hapësirë boshe me klasën e tekstit ndihmës dhe po vendos disa përmbajtje në mënyrë dinamike duke përdorur :: përpara pseudo-elementit. Në fakt mund të bëhet me JavaScript, por unë e kam përfshirë këtë shembull për të treguar metodën duke përdorur CSS të pastër.
hyrje: kërkohet + .tekst ndihmës :: përpara (përmbajtja: "* Kërkohet";)
Krahasuar me të kërkuarit, ky përzgjedhës bën të kundërtën. Unë përsëri përdor një hapësirë boshe me klasën e tekstit ndihmës për të treguar ndonjë tekst të mundshëm nëse atributi mungon.
Hyrja: opsionale + .help-tekst :: përpara (përmbajtja: "* Opsionale";)
Kjo duhet të jetë e njohur për shumicën prej jush, por është e rëndësishme ta mbani në mend. Është shumë e rëndësishme të tregohet nëse një fushë është e kyçur për një përdorues.
&: me aftësi të kufizuara (ngjyra e kufirit: var (- gri-më e çelët); ngjyra e sfondit: var (- gri-më e çelët); ngjyra: var (- dritë gri);)
: Lexo vetem
Një hyrje me një atribut vetëm për lexim duhet të përcjellë një vlerë paksa të ndryshme nga ajo. Është mirë që ekziston një përzgjedhës i tillë për këtë qëllim.
hyrja: vetëm për lexim (ngjyra e kufirit: var (- gri-më e lehtë); ngjyra: var (- gri); kursori: nuk lejohet;)
: e vlefshme
Ndërsa shumica e vlefshmërisë së formularit do të bëhet me duke përdorur JavaScript, ne mund të përfitojmë nga HTML5 për të vërtetuar formën dhe stilin e fushës së hyrjes. Ky përzgjedhës na jep mundësinë për të stiluar çdo hyrje që aktualisht po kalon rregullat e integruara të verifikimit të shfletuesit.
Këtu po shkruaj kodin që svg të përdorë veçorinë sfond-imazh për të shfaqur një shenjë kontrolli në fushën e hyrjes.
Hyrja: e vlefshme (border-color: var (- color-primary); background-image: url ("data: image / svg + xml,% 3Csvg width =" 45px "height =" 34px "viewBox =" 0 0 45 34 "versioni =" 1.1 "xmlns ="http://www.w3.org/2000/svg "xmlns: xlink =" http://www.w3.org/1999/xlink "% 3E% 3Cg goditje = " none "stroke-width =" 1 "fill =" asnjë "fill-rule =" evenodd "% 3E% 3Cg transform =" translate% 28-56.000000, -59.000000% 29 "fill ="% 232EEC96 "% 3E% 3Cpoly pikat = "70.1468531 85.8671329 97.013986 59 100.58042 62,5664336 70,1468531 93 56 78,8531469 59,5664336 75,2867133"% 3E% 3C / poligoni% 3E% 3C / g% 3E% 3C / g% 3E% 3C / svg% 3E% 0A ");
Ky përzgjedhës kontrollon nëse hyrja NUK po kalon rregullat e integruara të verifikimit të shfletuesit (për shembull, nëse URL-ja e futur Email nuk përmban një email të vërtetë).
Përsëri, shtoj kodin për svg për të shfaqur "X" në fushën e hyrjes.
Hyrja: e pavlefshme (border-color: var (- color-error); background-image: url ("data: image / svg + xml,% 3Csvg width =" 30px "height =" 30px "viewBox =" 0 0 30 30 "versioni =" 1.1 "xmlns ="http://www.w3.org/2000/svg "xmlns: xlink =" http://www.w3.org/1999/xlink "% 3E% 3Cg goditje = " none "stroke-width =" 1 "fill =" asnjë "fill-rule =" evenodd "% 3E% 3Cg transform =" translate% 28-128.000000, -59.000000% 29 "fill ="% 23F44336 "% 3E% 3 pikat = "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 / poligoni% 3E% 3C / g% 3E% 3C / g% 3E% 3C / svg% 3E% 0A ");)
Ju gjithashtu mund të personalizoni disa mesazhe verifikimi për secilën lloji i hyrjes duke përdorur një hapësirë me klasën e tekstit ndihmës dhe :: përpara pseudoelementit.
input: invalid + .help-text :: përpara (përmbajtja: "Duhet të vendosni një email të vlefshëm.")
: në interval /: jashtë rrezes
Këta përzgjedhës përcaktojnë nëse vlera është fushë numerike brenda vlerave minimale/maksimale të përcaktuara.
(vlera duhet të jetë midis 1 dhe 10) hyrje: jashtë diapazonit + .tekst ndihmës :: përpara (përmbajtja: "Jashtë diapazonit";)
Ju ndoshta jeni njohur me këtë përzgjedhës. Bën të mundur aplikimin stile të personalizuara te kutitë e kontrollit dhe butonat e radios. Teknika ime për stilimin e kutive të kontrollit përfshin krijimin e një elementi në linjë dhe vendosjen e një etikete pas hyrjes.
Unë e fsheh vizualisht hyrjen në mënyrë që të zhduket nga pamja, por është ende e klikueshme. Më pas unë stiloj etiketën :: para për t'u dukur si një kuti zgjedhjeje dhe etiketa :: pas për t'u dukur si një kuti kontrolli. Unë jam duke përdorur një përzgjedhës për të stiluar në mënyrë të përshtatshme këto dy pseudo-elemente.
&: kontrolluar + etiketë :: përpara (ngjyra e sfondit: var (- ngjyra-primare);) &: e kontrolluar + etiketa :: pas (ekrani: bllok; pozicioni: absolut; lart: 0.2rem; majtas: 0.375rem; gjerësia : 0,25 rem; lartësia: 0,5 rem; kufiri: e bardhë e fortë; gjerësia e kufirit: 0 2 px 2 px 0; transformimi: rrotullimi (45 gradë); përmbajtja: "";)
