Decorare formă Css. Stil de formă modern cu CSS

Acest articol prezintă câteva trucuri pe care poate nu le știai că le vei găsi utile în design-urile tale.

1. O imagine ca fundal care dispare atunci când introduceți text.

Poti sa adaugi imagine de fundal la fel ca orice alt element. În acest caz, stilul implicit pentru zona de text este schimbat, și anume chenarul de 1px este schimbat într-un chenar teșit. Se remediază indicație explicită frontieră.

Zona textului (fond: url (imagini/benice.png) centru centru fără repetare; chenar: 1px solid # 888;)

Imaginea de fundal poate afecta lizibilitatea textului. Prin urmare, imaginea de fundal trebuie eliminată când focalizarea este primită și returnată dacă zona de text rămâne fără text. De exemplu, folosind jQuery se poate face astfel:

$ ("textarea") .focus (funcție () ($ (acest) .css ("fundal", „niciunul");)) .blur (funcție () (dacă ($ (acest) .value == "" ) ($ (acest) .css („background”, „url (images / benice.png) center center no-repeat”);)));

2. Substituent în HTML5

HTML5 introduce un nou atribut numit substituent. Valoarea acestui atribut este afișată în element de textși dispare când se primește focalizarea, precum și când se introduce text în element.

Substituentul HTML5 este acceptat în următoarele browsere: Safari 5, Mobile Safari, Chrome 6 și Firefox 4 alpha.

3. Substituent, HTML5 cu suport pentru browser vechi folosind jQuery

Cel mai simplu mod de a verifica dacă un atribut este acceptat de browser este să verificați cu javaScript:

Funcția elementSupportsAttribute (element, atribut) (var test = document.createElement (element); return (atribut în test););

Apoi puteți scrie cod care se va declanșa dacă browserul nu acceptă atributul substituent.

Dacă (! ElementSupportsAttribute ("textarea", "placeholder")) (// Dacă browserul nu acceptă atributul, atunci codul jQuery este executat $ ("# example-three") .data ("originalText", $ ( "# exemplu-trei") .text ()) .css ("culoare "," # 999 ") .focus (funcție () (var $ el = $ (this); if (this.value == $ el. date (" originalText " )) (this.value = "";))) .blur (funcție () (dacă (this.value == "") (this.value = $ (this) .data ("originalText" );))) ;) else (// Dacă browserul acceptă HTML5, atunci utilizați doar această caracteristică $ ("# exemplu-trei") .attr ("substituent", $ ("# exemplu-trei"). text ( )) .text ("");)

4. Îndepărtați conturul zonei de text

Browserele de pe motoarele webkit, precum și din FireFox 3.6, conturează zona de text atunci când este focalizată. Puteți elimina acest outline folosind proprietatea outline css pentru browserele webkit. Pentru FireFox, este utilizată proprietatea -moz-appearance sau puteți pur și simplu să setați un chenar sau un fundal pentru element.

Textarea (contur: niciunul; -moz-aspect: niciunul; chenar: 1px solid # 999; / * setarea acestei proprietăți va elimina și conturul din FireFox * /)

5. Interzicerea redimensionării

Browserele Webkit adaugă o imagine vizuală zonei de text din colțul din dreapta jos, care vă permite să redimensionați zona de text. Dacă doriți să eliminați această caracteristică, atunci trebuie să utilizați următoarea proprietate css:

Zona de text (redimensionare: niciuna;)

6. Adăugarea capacității de redimensionare

jQuery UI vă permite să adăugați redimensionare la textarea. Acest lucru funcționează pentru toate browserele și înlocuiește comportamentul implicit pentru browserele webkit. Pentru a utiliza această caracteristică, trebuie să vă conectați jquery.ui și să scrieți următorul cod:

$ ("textarea"). redimensionabil ();

7. Redimensionați pentru a se potrivi conținutului

James Padolsey a scris un script jQuery la îndemână care redimensionează automat o zonă de text pentru a se potrivi conținutului acesteia. Se pare că acest plugin nu mai există, dar îl puteți folosi pe acesta, de exemplu. Pluginul conține multe setări, dar cel mai simplu mod de a-l folosi este:

$ ("textarea"). autoResize ();

8. Nowrap

Pentru a nu împacheta cuvintele pe linii noi, pentru toate elementele se folosește proprietatea white-space css, care nu funcționează cu textarea. Atributul wrap trebuie utilizat pentru textarea.

9. Eliminarea barelor de defilare în IE

IE arată o bară de defilare verticală pentru toate zonele de text. Le puteți ascunde folosind overflow: hidden, dar în acest caz nu se va afișa când conținutul este mărit. Prin urmare, este mai corect să folosiți următoarea abordare:

Zona de text (overflow: auto;)

În acest caz, bara de defilare nu va fi afișată când tot textul este plasat în zona de text, dar va fi afișată dacă este necesar.

Puteți vedea exemple pentru articol.

Deja au fost sparte destul de multe copii ale dezvoltatorilor front-end cu privire la problema stilării câmpului de intrare intrare... Miezul problemei este că nu există reguli stricte în specificația HTML pentru modul în care acest element ar trebui să fie afișat de browser. Mai mult, pentru intrare nu sunt furnizate atribute pentru a-l schimba aspect, folosind stiluri CSS, puteți schimba doar aspectul chenarului și fontului acestuia, iar folosind JavaScript, din motive de securitate, nu puteți simula un clic pe acest element, ceea ce ar provoca fereastra sistemului pentru a selecta un fișier * ... Dar ce să faci atunci când un client dorește un site web responsive cu forme stilizate frumoase, ceea ce nu se poate face fără acest câmp de introducere?

* - la momentul scrierii acestui articol, încă nu știam ce era deja în toate browsere moderne simulați clic pe intrare apelează fereastra de selecție a fișierelor de sistem. Mulțumiri lui Lutov pentru comentariul valoros cu un link către un exemplu de lucru de la Pagefest!

Modalități de rezolvare a problemei stilării terenului

În timp ce această problemă a existat (și există de foarte mult timp), au fost găsite mai multe modalități de a o rezolva. Sunt cinci în total:

Metoda numărul 1 (cea mai comună)

Convingeți clientul că este posibil să trăiți cu un standard intrare.

Metoda numărul 2

Scrieți / utilizați un încărcător de fișiere gata făcut pe aplicația Flash / Java. Folosit, de exemplu, la habrastorage.org

Metoda numărul 3 (va fi discutată în articol)

Utilizați CSS pentru a „masca” standardul intrare, faceți-l complet transparent și plasați-l în locul câmpului fals stilizat, astfel încât clic pe ultimul să provoace un clic pe cel standard și, ca urmare, deschide fereastra de selecție a fișierelor de sistem.

Metoda numărul 4 nou!(va fi discutat în articol)

Așezați transparent intrareîn interiorul elementului de etichetă, împreună cu elementele inline cu stil arbitrar (cu excepția introducerii, a butonului, a selectării și a zonei de text, desigur). Făcând clic pe etichetă va duce automat la clic pe câmpul ascuns pentru selectarea unui fișier. Multumesc lampa pentru comentariul valoros!

Metoda numărul 5 nou!(va fi discutat în articol)

Utilizați clic simulat pe ascuns intrare prin intermediul JavaScript. Da, acest lucru funcționează deja în toate browserele moderne. Mulțumesc din nou lui Lutov pentru comentariul valoros!
UPD: Atenție, această metodă nu este aplicabilă pentru browser Internet Explorer! Deși fișierul este selectat într-un mod ascuns intrare, la depunerea formularului, valoarea acestuia din urmă va fi „resetată”. Mulțumim lui LeonidFrolov pentru comentariul valoros!

Toate cele patru metode din urmă au, desigur, dezavantajele lor. Dezavantaj semnificativ Soluțiile Flash/Java sunt că pentru funcționarea acestuia sunt necesare plugin-uri adecvate, care este posibil să nu fie disponibile în browserul utilizatorului. Defect mare Soluția „deghizată” este că pentru implementarea sa este necesar să se utilizeze hack-uri (despre asta va fi de mai jos), și, de asemenea, pentru că este lipsit de sens fără folosind JavaScript(la urma urmei, trebuie să distingeți cumva între stările „fișierul nu este selectat” și „fișierul este selectat” pentru un câmp fals stilizat, ceea ce este imposibil de făcut doar cu CSS). O soluție JavaScript în general ar fi foarte bună, dar după cum sa dovedit în practică, nu este acceptată motor de cautare Explorer, așa cum am menționat mai sus. Dezavantajul soluției de etichetă este aceeași utilizare a JavaScript, cu toate acestea, este mult mai bună decât metoda de „mascare” și ar trebui, în opinia mea, folosită acum pentru a rezolva această problemă acută.

Diagrama bicicletei

Sarcina cheie a fost crearea unui „cauciuc” intrare care este pe ecrane dispozitive mobile ar fi un simplu buton pentru selectarea unui fișier (numele fișierului selectat este afișat pe el), iar pe ecranele largi ar arăta ca un câmp de text + un buton care este familiar tuturor, care se poate întinde pe toată lățimea fereastra:

Vedere schematică a unui element pe dispozitivele mobile

Vedere schematică a unui element pe dispozitivele desktop

Articolul va acoperi trei ultimele moduri stilizarea casetei de selecție a fișierelor. Astfel, ținând cont de schema de mai sus, aspectul inițial pentru metoda „camuflaj” # 3 va arăta astfel (ordinea elementelor copil este importantă!):

Aspect posibil pentru metoda folosind elementul etichetă:
Selectați Niciun fisier selectat

Aspect posibil pentru o soluție JavaScript (la fel ca aspectul pentru metoda „mascare”):

— Trage, purcelule! sau stiluri pentru un mod de „camuflaj”.

Pentru ca cititorul să nu aibă impresia greșită că fiecare valoare a proprietăților CSS folosită în articol este de mare importanță (așa-numitele „numere magice”), suntem de acord să le marchem pe acelea care pot fi modificate în siguranță pentru a se potrivi nevoilor dvs. un comentariu

/ * exemplu * /

Afacere? Amenda! Să începem să modelăm caseta noastră de selecție a fișierelor false cu div-ul său „înveliș”. .fișier încărcat:

File_upload (poziție: relativă; overflow: ascuns; font-size: 1em; / * exemplu * / înălțime: 2em; / * exemplu * / line-height: 2em / * la fel ca înălțimea * /)
- proprietatea poziției este setată astfel încât relativ la div .fișier încărcat ar putea să-l poziționeze absolut elemente copil, iar proprietatea de overflow este pentru a ascunde tot ceea ce, dintr-un motiv oarecare, nu se va potrivi în ambalajul nostru (și există așa ceva, dar mai multe despre asta mai târziu). Pe ecranele late, câmpul și butonul nostru frumos ar trebui să fie afișate într-o singură linie - vom seta pentru ultimul lățime fixăși float: dreapta, iar pentru prima există o mică căptușeală:

Buton File_upload> (float: dreapta; lățime: 8em; / * exemplu * / înălțime: 100%) .file_upload> div (padding-left: 1em / * exemplu * /)
Deoarece dorim ca câmpul de text să fie ascuns pe dispozitivele mobile și mai există un singur buton de selectare a fișierelor, trebuie să setăm interogare media:
Ecran numai @media și (lățime maximă: 500 px) (/ * exemplu * / .file_upload> div (afișare: niciunul) .file_upload> buton (lățime: 100%))
Ei bine, acum - cel mai distractiv din aceasta metoda! Este necesar să se facă un standard intrare complet transparent și extindeți-l pentru a o întinde la dimensiunea div-ului „înveliș”. .fișier încărcat... Pentru a implementa pe acesta din urmă, vom aplica un hack în formular poziționare absolutăși proprietatea de transformare CSS 3, pe care o putem folosi pentru a mări elementul, de exemplu, de 20 de ori (da, aceasta este cea mai comună " număr magic»):
Intrare .file_upload (poziție: absolut; stânga: 0; sus: 0; lățime: 100%; înălțime: 100%; transformare: scară (20); spațiere între litere: 10em; / * IE 9 fix * / -ms-transform : scară (20); / * IE 9 fix * / opacitate: 0; cursor: pointer)
După cum puteți vedea din fragmentul CSS de mai sus, au fost necesare cârje suplimentare pentru IE 9. Acest lucru se datorează faptului că browser dat când dați clic pe câmpul de text, acesta nu apelează fereastra de selecție a fișierelor de sistem, ci vă oferă cu amabilitate să „ștergeți” numele celui deja selectat, care este simbolizat prin clipirea cursor text... Prin urmare, este setată suplimentar o distanță uriașă între litere, ceea ce mărește butonul elementului la dimensiunea unui div. .fișier încărcat... De asemenea, rețineți că indicele z în în acest caz nespecificat, deoarece element merge ultimul„Copilul” din marcaj selectat de la început.

Pe exemplul desktopului browser FireFox, acum caseta noastră personalizată de selecție a fișierelor pentru marimi diferite windows arata asa:

„Totul ingenios este simplu!” sau stiluri pentru metoda etichetei

Stiluri de bază aplicate câmp de textși butonul, pentru această metodă sunt similare cu cele deja discutate mai sus:

File_upload (afișare: bloc; poziție: relativă; overflow: ascuns; dimensiunea fontului: 1em; / * exemplu * / înălțimea: 2em; / * exemplu * / înălțimea liniei: 2em / * la fel ca înălțimea * /) .file_upload .button, .file_upload> marcaj (afișare: bloc; cursor: pointer / * exemplu * /) .file_upload .button (float: dreapta; box-sizing: border-box; -moz-box-sizing: border-box; lățime : 8em; / * exemplu * / înălțime: 100%; text-align: center / * exemplu * /) marcaj .file_upload> (fond: transparent; / * exemplu * / padding-left: 1em / * exemplu * /)
Cu toate acestea, acum nu mai este necesar să folosiți hack-ul cu „întinderea” transparentului intrare:

Intrare File_upload (poziție: absolut; sus: 0; opacitate: 0)

"Cum functioneaza?" sau stiluri pentru o soluție JavaScript

De la aspectul original pentru aceasta metoda a fost ales la fel ca în „mascare”, stilurile pentru buton și câmpul de text pentru ambele metode sunt de asemenea aceleași (cu excepția, poate, a cursorului: proprietatea pointer, care, în acest caz, va fi aplicată butonului și câmpul de text). Stilul este intrare puteți lua același lucru care a fost folosit în metodă folosind elementul etichetă, dar este mai bine în loc de proprietăți de opacitate utilizați vizibilitatea:

Introducere File_upload (poziție: absolut; sus: 0; vizibilitate: ascuns)

Sunt necesare mai multe stiluri!

Desigur, într-o formă atât de primitivă, câmpul de selecție a fișierelor este puțin probabil să se potrivească cuiva, așa că vom adăuga stiluri suplimentare care vor face butonul de selecție a fișierului, să zicem, violet, să adauge umbre etc. Să nu uităm să adăugăm propriul stil pentru buton atunci când cursorul trece peste el, stilul pentru butonul apăsat și, de asemenea, să adăugăm stilul pentru întregul element atunci când focalizarea este pe el (va fi aplicat folosind JavaScript):

/ * Fă-l frumos * / .file_upload (bord: 1px solid #ccc; border-radius: 3px; box-shadow: 0 0 5px rgba (0,0,0,0.1); tranziție: box-shadow 0.1s liniar) .file_upload.focus (box-shadow: 0 0 5px rgba (0,30,255,0.4)) .file_upload> Buton (fundal: # 7300df; tranziție: fundal 0,2s; chenar: 1px rgba solid (0,0,0,0.1) ); culoare-chenar: rgba (0,0,0,0,1) rgba (0,0,0,0,1) rgba (0,0,0,0,25); rază-chenar: 2px; umbră casetă: 0 1px 0 rgba (255, 255, 255, 0.2) inset, 0 1px 2px rgba (0, 0, 0, 0.05); culoare: #fff; text-shadow: # 6200bd 0 -1px 0; overflow: ascuns; spatiu alb: nowrap; text-overflow: puncte suspensive) .file_upload: hover> buton (fond: # 6200bd; text-shadow: # 5d00b3 0 -1px 0) .file_upload: activ> buton (fundal: # 5d00b3; caseta-umbră: 0 0 3px rgba (0,0,0,0,3) inserție)

Acum caseta noastră de selecție a fișierelor arată astfel:

Am nevoie de mai multe cârje!

Deoarece creăm un câmp cu drepturi depline pentru selectarea unui fișier, trebuie să avem grijă ca acesta să poată fi umplut confortabil de la tastatură (pentru metoda de „mascare”, focalizarea este acum setată mai întâi pe butonul stilizat, apoi pe ascunsul intrare, care nu apare vizual în niciun fel). Pentru aceasta, desigur, folosim JavaScript. Pentru a nu scrie mult cod, îmi voi permite să folosesc populara bibliotecă jQuery. Apoi, pentru metoda „camuflaj”:

Var wrapper = $ (". File_upload"), inp = wrapper.find ("intrare"), btn = wrapper.find ("button"), lbl = wrapper.find ("div"); btn.focus (funcția () (inp.focus ())); // Cârje pentru: stilul de focalizare: inp.focus (funcție () (wrapper.addClass ("focus");)). Blur (funcție () (wrapper.removeClass ("focus");));
Pentru o metodă care utilizează o etichetă, puteți elimina secțiunea de cod responsabilă pentru transferul forțat de focalizare de la buton la intrare(pentru ca acolo nu avem deloc un buton, ci un span).

Pentru o metodă a cărei esență este simularea unui clic pe intrare, trebuie de fapt să adăugați această imitație:

// Da, funcționează! btn.add (lbl) .click (funcție () (inp.click ();)); și, de asemenea, corectați codul pentru a seta clasa .concentrare după îndepărtarea fragmentului responsabil pentru transferul de focalizare forțat:
// Cârje pentru: stilul de focalizare: btn.focus (funcție () (wrapper.addClass ("focus");)). Blur (funcție () (wrapper.removeClass ("focus");));

Câmpul de introducere a rămas încă „mort” - când fișierul a fost selectat, numele ultimului nu a fost afișat nicăieri. Este timpul să remediați și asta:

Var file_api = (window.File && window.FileReader && window.FileList && window.Blob)? adevarat fals; inp.change (funcție () (var nume_fișier; if (fișier_api && inp [0] .fișiere [0]) nume_fișier = inp [0] .fișiere [0] .nume; else nume_fișier = inp.val (). înlocuiți ( "C: \\ fakepath \\", ""); if (! File_name.length) return; if (lbl.is (": vizibil")) (lbl.text (file_name); btn.text ("Selectați" );) else btn.text (nume_fișier);)).schimbare ();
- dacă browserul acceptă File API, atunci numele fișierului este determinat folosindu-l, altfel este tăiat din valoarea ascunse intrare... Pentru dispozitivele mobile, când elementul este un singur buton, numele fișierului selectat este afișat pe acesta.

S-ar părea că tot ce se cere a fost deja scris. Și iată figurinele! Dacă selectați un fișier folosind câmpul „mobil”, apoi creșteți dimensiunea ferestrei și comutați elementul la „desktop”, atunci câmpul de text va rămâne „Fișier neselectat” - trebuie să actualizați elementul de fiecare dată când fereastra este redimensionat:
$ (fereastră) .resize (funcție () ($ (". input file_upload"). triggerHandler ("schimbare");));

Și ce am primit până la urmă?

Caseta de selectare a fișierelor stilizate rezultată a fost testată cu succes pentru toate cele trei metode în următoarele browsere:

• FireFox 22.0 (Linux, Windows)
• Opera 12.16 (Linux, Windows)
• Internet Explorer 9
• Chromium 27.0 (Linux)
• Apple Safari (iOS 6.3.1)
• Browser Android (Android 2.3.6)
• Android FireFox

Dintre avantajele tuturor abordărilor luate în considerare în articol, se pot distinge următoarele:

• Flash nu este folosit.
• Elementul poate fi aranjat cu ușurință folosind CSS folosind tehnologii moderne design receptiv.
• Câmpul poate fi completat și de la tastatură.

Dintre principalele dezavantaje:

• Necesitatea de a folosi JavaScript (se aplică tuturor metodelor).
• Folosind hack-uri CSS pentru un mod de „mascare”.
• Necesitatea de a scrie cârje suplimentare pentru un câmp cu un atribut multiplu(se aplică tuturor metodelor).
• Non-cross-browser - toate metodele nu au suport pentru IE 8 și, de asemenea, trebuie să utilizați proprietățile CSS „browser” pentru a accepta restul „vechilor”.
• Soluția JavaScript nu este acceptată de toată lumea versiuni de internet Explorer, precum și unele versiuni mai vechi ale altora browsere populare(deși aproape nimeni nu le mai folosește).

Care dintre cele trei două moduri elegante de a crea un stilizat intrare alege pentru utilizarea de zi cu zi- tu decizi. Alegerea mea este metoda etichetei (deși are un aspect non-semantic).

Exemple de lucru ale tuturor celor trei metode pot fi găsite pe CodePen.

Consultați selectoarele noi și vechi pe care le puteți utiliza pentru a stila intrările de formular în funcție de dacă câmpurile sunt obligatorii, corecte etc., sugerează Jonathan Harrell. Vă prezentăm o traducere adaptată a articolului său.

Se cunoaște bine ce să aplici Stiluri CSS Formularele au fost întotdeauna dificile, dar există câteva selectoare subutilizate care ne oferă opțiuni semnificative de stil pentru câmpurile de intrare și elementele din jur. Unele sunt relativ noi, în timp ce altele există de ceva timp.

Puteți vedea un exemplu de utilizare a acestora.

: substituent-afisat

Primul selector este relativ nou și nu este încă pe deplin acceptat de browsere. Dar se pare că ar putea fi folosit destul de ușor ca îmbunătățire în viitor. Acest selector ne oferă posibilitatea de a stabili dacă substituentul este vizibil în prezent pentru utilizator. Acest lucru poate fi util dacă dorim să ascundem și să arătăm dinamic eticheta asociată cu intrarea.

Aici ascund eticheta până când utilizatorul începe să tasteze în intrare, ascunzând substituentul. Pentru aspectul etichetei, folosesc efect frumos tranziție. Amintiți-vă, pentru ca acest lucru să funcționeze, eticheta trebuie să meargă DUPĂ introducere.

.form-group (poziție: relativ; padding-top: 1.5rem;) etichetă (poziție: absolut; top: 0; font-size: var (- font-size-small); opacitate: 1; transform: translateY ( 0 ); tranziție: toate cele 0,2 secunde eliberate;) intrare: substituent afișat + etichetă (opacitate: 0; transformare: translateY (1rem);)

Utilizați acest selector pentru a indica faptul că un câmp are un atribut. Aici folosesc un interval gol cu ​​clasa text de ajutor și plasez un conținut dinamic folosind :: înainte de pseudo-element. De fapt, se poate face cu JavaScript, dar am inclus acest exemplu pentru a arăta metoda folosind CSS pur.

Intrare necesară input: required + .help-text :: before (conținut: „* Obligatoriu”;)

În comparație cu necesar, acest selector face opusul. Folosesc din nou un interval gol cu ​​clasa help-text pentru a afișa un text posibil dacă atributul lipsește.

Intrare: opțional + .help-text :: înainte (conținut: „* Opțional”;)

Acesta ar trebui să fie familiar pentru majoritatea dintre voi, dar este important să îl țineți minte. Este foarte important să arătați dacă un câmp este blocat pentru un utilizator.

&: dezactivat (culoare-chenar: var (- gri-deschis); culoare de fundal: var (- gri-cel mai deschis); culoare: var (- gri-deschis);)

: numai pentru citire

O intrare cu un atribut numai în citire trebuie să transmită o valoare ușor diferită de. E bine că există un astfel de selector în acest scop.

intrare: numai citire (culoare-chenar: var (- gri-deschis); culoare: var (- gri); cursor: nepermis;)

: valabil

În timp ce cea mai mare parte a validării formularului se va face cu folosind JavaScript, putem profita de HTML5 atât pentru a valida forma, cât și pentru a stila câmpul de intrare. Acest selector ne oferă posibilitatea de a stila orice intrare care trece în prezent prin regulile de validare încorporate ale browserului.

Aici scriu codul pentru svg pentru a utiliza proprietatea imagine de fundal pentru a afișa o bifă în câmpul de introducere.

Intrare: valid (culoare-chenar: var (- culoare-primară); imagine de fundal: url ("date: imagine / svg + xml,% 3Csvg lățime =" 45px "height =" 34px "viewBox =" 0 0 45 34 "versiunea =" 1.1 "xmlns =" ​​​​http://www.w3.org/2000/svg "xmlns: xlink =" http://www.w3.org/1999/xlink "% 3E% 3Cg accident vascular cerebral = " none "stroke-width =" 1 "fill =" none "fill-rule =" evenodd "% 3E% 3Cg transform =" translate% 28-56,000000, -59,000000% 29 "fill ="% 232EEC96 "% 3E% 3Cpolygon puncte = "70.1468531 85.8671329 97.013986 59 100.58042 93 56 70.1468531 62.5664336 78.8531469 59.5664336 75.2867133" % 3E% 3C / poligonului% 3E% 3C / g% 3E% 3C / g% 3E% 3C / svg% 3E% 0A „);

Acest selector verifică dacă intrarea NU trece regulile de validare încorporate ale browserului (de exemplu, dacă adresa URL introdusă E-mail nu conține un e-mail real).

Din nou, adaug codul pentru svg pentru a afișa „X” în câmpul de introducere.

Intrare: nevalidă (culoare-chenar: var (- eroare de culoare); imagine de fundal: url ("date: imagine / svg + xml, % 3Csvg lățime =" 30px "height =" 30px "viewBox =" 0 0 30 30 "versiunea =" 1.1 "xmlns =" ​​​​http://www.w3.org/2000/svg "xmlns: xlink =" http://www.w3.org/1999/xlink "% 3E% 3Cg accident vascular cerebral = " none "stroke-width =" 1 "fill =" none "fill-rule =" evenodd "% 3E% 3Cg transform =" translate% 28-128.000000, -59.000000% 29 "fill ="% 23F44336 "% 3E% 3E% 3 puncte = "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 / poligonului% 3E% 3C / g% 3E% 3C / g% 3E% 3C / svg% 3E% 0A ");)

De asemenea, puteți personaliza câteva mesaje de verificare pentru fiecare tip de introducere folosind un interval cu clasa text de ajutor și pseudo-elementul :: înainte.

Intrare nevalidă input: invalid + .help-text :: before (conținut: „Trebuie să introduceți un e-mail valid.”)

: în rază /: în afara intervalului

Acești selectori determină dacă valoarea este câmp numeric in limitele valorilor minime/maxime specificate.

Intrare în afara intervalului (valoarea trebuie să fie între 1 și 10) input: out of range + .help-text :: before (conținut: „Out of range”;)

Probabil că sunteți familiarizat cu acest selector. Face posibilă aplicarea stiluri personalizate la casete de selectare și butoane radio. Tehnica mea de modelare a casetelor de selectare implică crearea unui element inline și plasarea unei etichete după introducere.

Ascund vizual intrarea, astfel încât să dispară din vedere, dar încă se poate face clic. Apoi stil eticheta :: înainte să arate ca o casetă de selectare și etichetă :: după să arate ca o casetă de selectare. Folosesc un selector pentru a stila aceste două pseudo-elemente în mod corespunzător.

&: bifat + etichetă :: înainte (culoare de fundal: var (- culoare-primară);) &: bifat + etichetă :: după (afișare: bloc; poziție: absolut; sus: 0,2 rem; stânga: 0,375 rem; lățime : 0,25 rem; înălțime: 0,5 rem; chenar: alb continuu; lățime margine: 0 2px 2px 0; transformare: rotire (45deg); conținut: "";)