Substituenții, acele elemente de text deseori gri din interiorul unei intrări, pot fi dificil de stilat. Din fericire, am găsit o soluție CSS scurtă, dar eficientă, pentru a stila textul substituent al introducerii dvs. în orice culoare și opacitate doriți. Citiți mai departe pentru cod.
Schimbarea culorii textului substituent
Să începem cu o introducere simplă și un text substituent, pentru acest exemplu vom folosi cuvântul „căutare”, dar puteți folosi orice doriți. HTML de bază este mai jos:
HTML
Textul substituent de intrare (și zona de text) este implicit la o culoare gri deschis, cu toate acestea, îl putem schimba cu câteva linii de CSS. Aici vom colora intrarea text roșu folosind un nume de culoare HTML, dar orice metodă de culoare va fi suficientă (HEX, RGB, HSL).
CSS
::-webkit-input-placeholder ( /* Chrome */ culoare: roșu; ) :-ms-input-placeholder ( /* IE 10+ */ culoare: roșu; ) ::-moz-placeholder ( /* Firefox 19 + */ culoare: roșu; opacitate: 1 ) :-moz-placeholder ( /* Firefox 4 - 18 */ culoare: roșu; opacitate: 1; )Rețineți că este important să includeți diferitele prefixe de furnizor pentru a accepta cât mai multe browsere. Numai textul substituent introdus de Firefox are o ușoară transparență, așa că nu este necesar să setați proprietatea de opacitate pe IE sau Chrome.
Modificarea culorii textului focalizat al substituentului
Bine, am schimbat cu succes culoarea textului substituent în roșu, dar ar fi bine să se întâmple ceva când un utilizator face clic în interiorul intrării noastre. Folosind aceleași proprietăți CSS prefixate de furnizor, putem modifica opacitatea textului substituentului de intrare. la focalizare.
CSS
intrare (contur: niciunul; umplutură: 12px; chenar-rază: 3px; chenar: 1px negru solid; ) ::-webkit-input-placeholder ( /* Chrome */ culoare: roșu; tranziție: opacitate 250 ms ease-in-out ; ) :focus::-webkit-input-placeholder ( opacitate: 0,5; ) :-ms-input-placeholder ( /* IE 10+ */ culoare: roșu; tranziție: opacitate 250ms ease-in-out; ) :focus :-ms-input-placeholder ( opacitate: 0,5; ) ::-moz-placeholder ( /* Firefox 19+ */ culoare: roșu; opacitate: 1; tranziție: opacitate 250 ms ease-in-out; ) :focus:: -moz-placeholder ( opacitate: 0,5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ culoare: roșu; opacitate: 1; tranziție: opacitate 250 ms ease-in-out; ) :focus:-moz-placeholder (opacitate: 0,5; )În exemplul de mai sus, am introdus câteva stiluri de bază pentru intrarea în sine și am adăugat o tranziție la opacitate pentru a face experiența puțin mai plăcută. Consultați demonstrația și experimentați cu alte proprietăți și tranziții CSS.
Substituent este o pseudo-clasă sau pseudo-element care este responsabil pentru afișarea numelui câmpului. În esență, aceasta este o etichetă (să o numim așa pentru simplitate) în care introduceți un cuvânt, iar utilizatorul îl vede în interior. Un fel de indiciu sau nume pentru fiecare câmp de formular.
Fiecare browser gestionează această etichetă în mod diferit, iar stilul său lasă mult de dorit. Pentru a schimba stilurile implicite, trebuie doar să adăugați câteva linii de cod în fișierul de stiluri. Nu este nimic complicat.
Cu toate acestea, este necesar să ținem cont de faptul că nu tot ce putem schimba.
Printre varietatea de stiluri, în acest caz, ne sunt disponibile următoarele lucruri:
- font-weight — setarea greutății textului
- dimensiunea fontului — selectați dimensiunea textului
- font-family - selecția fontului
- fundal - fundal și imagine de fundal
- culoare — culoarea textului
- word-spacing - setați distanța dintre cuvinte
- letter-spacing - setați spațierea dintre litere
- text-decoration — alegerea cuvântului decor. Subliniat, tăiat etc.
- vertical-align — setează alinierea verticală
- text-transform - alegerea modificării textului. Toate cu litere mari sau mici etc.
- line-height — distanță între linii
- text-indent - setează o indentare din stânga pentru prima linie a unui paragraf
- text-overflow - alegerea de afișare a textului care nu se încadrează în bloc (ascunde sau decupează și adaugă puncte suspensive)
- opacitate — selectați transparența elementului
Acum că am înțeles stilurile disponibile, putem începe să proiectăm, pentru aceasta vom adăuga următoarele stiluri:
::-webkit-input-placeholder (culoare: #2cb04d; )
::-moz-placeholder ( culoare: #2cb04d; )/* Firefox 19+ */
:-moz-placeholder ( culoare: #2cb04d; ) /*Firefox 18- */
:-ms-input-placeholder (culoare: #2cb04d; )
După adăugarea acestor rânduri, culoarea numelor din câmpurile formularului se va schimba și va fi aceeași în fiecare browser. Puteți adăuga stiluri suplimentare aici.
De exemplu, acest stil
::-webkit-input-placeholder (culoare: #2cb04d; dimensiunea fontului: 1.5em; greutatea fontului: 600;)
::-moz-placeholder (culoare:#2cb04d; dimensiunea fontului:1.5em; greutatea fontului:600;) /*Firefox 19+*/
:-moz-placeholder (culoare:#2cb04d; dimensiunea fontului:1.5em; greutatea fontului:600;) /*Firefox 18-*/
:-ms-input-placeholder (culoare: #2cb04d; dimensiunea fontului: 1.5em; greutatea fontului: 600;)
Adăugați culoare, dimensiune mare și text mediu aldine. Daca adaugati proprietate suplimentară —
text-overflow:elipse apoi textul va fi tăiat pentru a se potrivi câmpului și se va adăuga o elipsă la sfârșit.
Mai există o proprietate interesantă: datorită apariției animației în css (stiluri), puteți configura ascunderea frumoasă atunci când plasați cursorul într-un câmp. Anterior, acest lucru se făcea folosind js (scripturi)
Intrare::-webkit-input-placeholder (opacitate: 1; tranziție: opacitate 0,3 s ușurință;)
.input::-moz-placeholder (opacitate: 1; tranziție: opacitate 0,3 s ușurință;)
.input:-moz-placeholder (opacitate: 1; tranziție: opacitate 0,3 s ușurință;)
.input:-ms-input-placeholder (opacitate: 1; tranziție: opacitate 0,3 s ușurință;)
.input:focus::-webkit-input-placeholder (opacitate: 0; tranziție: opacitate 0,3 s ușurință;)
.input:focus::-moz-placeholder (opacitate: 0; tranziție: opacitate 0,3 s ușurință;)
.input:focus:-moz-placeholder (opacitate: 0; tranziție: opacitate 0,3 s ușurință;)
.input:focus:-ms-input-placeholder (opacitate: 0; tranziție: opacitate 0,3 s ușurință;)
Adăugarea unor astfel de stiluri va permite substituentului să dispară fără probleme atunci când cursorul este plasat în câmp
.input este clasa elementului de formular. Pentru ca stilurile să funcționeze, codul câmpului de formular ar trebui să arate astfel:
Sau puteți folosi clasa de elemente. În acest fel, puteți seta stiluri diferite pentru fiecare formular.
.contacts-form form input::-webkit-input-placeholder (culoare: #2cb04d; dimensiunea fontului: 1.5em; greutatea fontului: 600;)
Introducere formular .contacts-form::-moz-placeholder (culoare: #2cb04d; dimensiunea fontului: 1.5em; greutatea fontului: 600;)/*Firefox 19+*/
Introducere formular .contacts-form:-moz-placeholder (culoare: #2cb04d; dimensiunea fontului: 1.5em; greutatea fontului: 600;)/*Firefox 18-*/
.contacts-form form input:-ms-input-placeholder (culoare: #2cb04d; dimensiunea fontului: 1.5em; greutatea fontului: 600;)
În aceste moduri simple, puteți crea un design de formă cu adevărat frumos.
În mod obișnuit, atributul substituent de pe intrare și textarea este utilizat pentru a oferi un îndemn la acțiune în cadrul acelor elemente. În această postare voi descrie mai multe opțiuni pentru stilarea textului substituenților, precum și opțiuni pentru animarea acestora
Deci, culoarea textului substituentului nostru poate fi schimbată folosind, de exemplu, următorul set de reguli CSS:
::-webkit-input-placeholder ( culoare : #c0392b ;) ::-moz-placeholder ( culoare : #c0392b ;) /* Firefox 19+ */ :-moz-placeholder ( culoare : #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder (culoare: #c0392b ;)
Lungimea codului pentru stilarea unei proprietăți atât de simple se datorează lipsei unui standard comun și, prin urmare, fiecare browser a implementat suport pentru stilarea substituenților în felul său.
De asemenea, nu toate sunt acceptate proprietăți css. Iată o listă de proprietăți exact acceptate:
font (și aferente)
fundal (și înrudit)
culoare
spațierea cuvintelor
spațiere între litere
text-decor
vertical-align
text-transformare
înălțimea liniei
text-indentare
text-debordare
opacitate
De asemenea, se întâmplă ca textul substituent „se extinde” dincolo de lățimea elementului de intrare sau textarea (un caz comun pentru dispozitive mobile). În același timp, este tăiat automat inestetic.
O proprietate CSS precum text-overflow: punctele de suspensie ne vor ajuta să remediem această problemă, care va adăuga o elipsă estetică în zona decupată a substituentului. În stiluri scriem astfel:
input [ substituent ] ( text-overflow : puncte suspensie ;) input ::-moz-placeholder ( text-overflow : puncte suspensive ;) input :-moz-placeholder ( text-overflow : puncte suspensive ;) input :-ms-input-placeholder ( text-overflow: puncte de suspensie ;)
Pentru a adăuga și mai multă estetică substituenților noștri, este posibil să adăugați efectul de ascundere atunci când elementul corespunzător primește focalizare.
Câteva exemple de astfel de ascundere cu elemente de animație:
/* schimbare lină a transparenței substituentului când este focalizat */.input ::-webkit-input-placeholder ( opacitate : 1 ; tranziție : opacitate 0,3 s ease ;) .input ::-moz-placeholder ( opacitate : 1 ; tranziție : opacitate 0,3 s ease ;).input :-moz- substituent (opacitate: 1; tranziție: opacitate 0,3s ease;).input:-ms-input-placeholder (opacitate: 1; tranziție: opacitate 0,3s ease;).input (opacitate: 0; tranziție: opacitate 0,3s ease; ) .input :focus::-moz-placeholder ( opacitate : 0 ; tranziție : opacitate 0.3s ease ;).input :focus:-moz-placeholder ( opacitate : 0 ; tranziție : opacitate 0,3s ease ;).input :focus :-ms-input-placeholder ( opacitate : 0 ; tranziție : opacitate 0,3 s ușurință ;) /* mutați substituentul la dreapta când este focalizat */.input ::-webkit-input-placeholder ( text-indent : 0px ; tranziție : text-indent 0.3s ease ;) .input ::-moz-placeholder ( text-indent : 0px ; tranziție : text-indent 0.3s ease ;).input :-moz-placeholder ( text-indent : 0px ; tranziție : text-indent 0,3s ease ;).input :-ms-input-placeholder ( text-indent : 0px ; tranziție : text-indent 0,3s ease ;).intrare :focus::-webkit-input-placeholder( text-indent : 500px ; tranziție : text-indent 0.3s ease ;).input :focus::-moz-placeholder ( text-indent : 500px ; tranziție : text-indent 0.3s ease ;).input :focus:- moz-placeholder ( text-indent : 500px ; tranziție : text-indent 0.3s ease ;) .input :focus:-ms-input-placeholder ( text-indent : 500px ; tranziție : text-indent 0.3s ease ;) /* mutați substituentul în jos când este focalizat */.input ::-webkit-input-placeholder ( line-height : 20px ; tranziție : line-height 0,5s ease ;) .input ::-moz-placeholder ( line-height : 20px ; tranziție : line-height 0,5s ease ;).input :-moz-placeholder ( line-height : 20px ; tranziție : line-height 0,5s ease ;).input :-ms-input-placeholder ( line-height : 20px ; tranziție : line-height 0,5s ease ;).intrare :focus::-webkit-input-placeholder( line-height : 100px ; tranziție : line-height 0.5s ușurință ;).input :focus::-moz-placeholder ( line-height : 100px ; tranziție: line-height 0.5s ease ;).input :focus:- moz-placeholder ( line-height : 100px ; tranziție : line-height 0.5s ease ;).input :focus:-ms-input-placeholder ( line-height : 100px ; tranziție: line-height 0.5s ease ;)
Să terminăm aici.
Substituentul este un element al unui câmp de intrare în care poate fi plasat un sfat explicativ. Când utilizatorul începe să introducă date, textul suport dispare pentru a nu interfera. Fiecare browser are propria sa opinie cu privire la modul în care acest element ar trebui să fie afișat și, uneori, stilurile implicite sparg întregul design. Pentru a le gestiona, trebuie să utilizați o regulă specială de substituent CSS.
Unde este substituentul?
Problema este că sfatul instrument al câmpului de intrare este ascuns în siguranță în DOM-ul umbră și nu este atât de ușor de accesat. Pentru aceasta, este folosit un substituent special non-standard ::. Cu ajutorul acestuia, puteți gestiona proprietățile descrierii.
Stilul unui substituent în CSS arată astfel:
Intrare:: substituent (culoare: roșu; opacitate: 1; stil font: cursiv; )
Suport pentru browser
Pseudo-elementul substituent CSS este gestionat bine de toată lumea browsere moderne, iar pentru a accepta browsere mai vechi, puteți folosi prefixele:
- ::-webkit-input-placeholder - pentru browserele webkit (Safari, Chrome, Opera);
- ::-moz-placeholder - pentru Browsere Firefox versiunea de mai sus 19;
- :-moz-placeholder - pentru Firefox mai vechi;
- :-ms-input-placeholder - pentru Internet Explorer mai sus de versiunea 10.
După cum vezi, bătrâne Browsere Mozilla, precum și IE, consideră substituentul ca fiind o pseudo-clasă CSS, nu un pseudo-element. Să nu ne certăm cu ei, doar că vom ține cont de acest aspect atunci când stilăm câmpul de introducere.
Opțiuni de stil
Puteți seta următoarele opțiuni pentru pseudo-elementul substituent în CSS:
- fundal - grupul de blocuri de indicații se aplică întregului câmp de introducere. Puteți seta nu numai culoarea (culoarea de fundal), ci și imaginea (imaginea de fundal).
- culoarea textului - culoare;
- transparență - opacitate;
- sublinierea, supralinierea sau eliminarea - text-decor;
- caz - text-transform;
- indentări interne – căptușeală. Nu este acceptat de toate browserele. Ca și în cazul elementelor în linie, umplutura de sus și de jos este ignorată.
- Afișare font - proprietăți ale grupului de fonturi, înălțimea liniei și diverse indentări (text-indent, letter-spacing, word-spacing);
- aliniere verticală într-o linie - vertical-align;
- decuparea textului atunci când containerul depășește - text-overflow.
În Focus
În mod implicit, sfatul cu instrumente dispare din câmpul de introducere numai dacă este introdus cel puțin un caracter în el. Dar substituent vă permite să implementați imediat dispariția atunci când vă concentrați pe teren. Pentru a face acest lucru, trebuie să-l combinați cu pseudo-class:focus.
Intrare:focus::substituent (culoare: transparent; )
În unele browsere, este posibilă animarea modificărilor unui număr de proprietăți de substituent folosind instrucțiunea de tranziție.
Input::substituent (culoare: negru; tranziție: culoare 1s; ) input:focus::substituent (culoare: alb; )
În browser Google Chrome Când vă concentrați pe un astfel de câmp, culoarea indicii se va schimba ușor în decurs de o secundă.
Substituentul este un element al unui câmp de intrare în care poate fi plasat un sfat explicativ. Când utilizatorul începe să introducă date, textul suport dispare pentru a nu interfera. Fiecare browser are propria sa opinie cu privire la modul în care acest element ar trebui să fie afișat și, uneori, stilurile implicite sparg întregul design. Pentru a le gestiona, trebuie să utilizați o regulă specială de substituent CSS.
Unde este substituentul?
Problema este că sfatul instrument al câmpului de intrare este ascuns în siguranță în DOM-ul umbră și nu este atât de ușor de accesat. Pentru a face acest lucru, este folosit un pseudo-element CSS::placeholder special non-standard. Cu ajutorul acestuia, puteți gestiona proprietățile descrierii.
Te va interesa:
Stilul unui substituent în CSS arată astfel:
input::placeholder (culoare: roșu; opacitate: 1; stil font: cursiv; ) 
Suport pentru browser
Pseudo-elementul substituent CSS este gestionat bine de toate browserele moderne și, pentru a accepta browserele mai vechi, puteți utiliza următoarele prefixe:
- ::-webkit-input-placeholder - pentru browserele webkit (Safari, Chrome, Opera);
- ::-moz-placeholder - pentru browserele Firefox peste versiunea 19;
- :-moz-placeholder - pentru Firefox mai vechi;
- :-ms-input-placeholder - pentru Internet Explorer peste versiunea 10.
După cum puteți vedea, browserele Mozilla mai vechi, precum și IE, consideră substituentul ca o pseudo-clasă CSS și nu un pseudo-element. Să nu ne certăm cu ei, doar că vom ține cont de acest aspect atunci când stilăm câmpul de introducere.
Opțiuni de stil
Puteți seta următoarele opțiuni pentru pseudo-elementul substituent în CSS:
- fundal - grup de proprietăți de fundal. Fundalul blocului de indicii se extinde la întreg câmpul de intrare. Puteți seta nu numai culoarea (culoarea de fundal), ci și imaginea (imaginea de fundal).
- culoarea textului - culoare;
- transparență - opacitate;
- sublinierea, supralinierea sau eliminarea - text-decor;
- caz - text-transform;
- indentări interne – căptușeală. Nu este acceptat de toate browserele. Ca și în cazul elementelor în linie, umplutura de sus și de jos este ignorată.
- Afișare font - proprietăți ale grupului de fonturi, înălțimea liniei și diverse indentări (text-indent, letter-spacing, word-spacing);
- aliniere verticală într-o linie - vertical-align;
- decuparea textului atunci când containerul depășește - text-overflow.
Input1::substituent (imagine de fundal: gradient liniar (lime, albastru); culoare: alb; ) .input2::substituent (decor text: linie; culoare: violet; greutate font: bold; ) .input3 ::substituent (dimensiunea fontului: 16px; spațiere între litere: 10px; ) .input4::substituent (fundal: maro; culoare: alb; text-overflow: puncte suspensive; )
În Focus
În mod implicit, sfatul cu instrumente dispare din câmpul de introducere numai dacă este introdus cel puțin un caracter în el. Dar pseudo-elementul substituent CSS vă permite să implementați estomparea imediat când vă concentrați pe câmp. Pentru a face acest lucru, trebuie să-l combinați cu pseudo-class:focus.
input:focus::substituent (culoare: transparent; )
În unele browsere, este posibilă animarea modificărilor unui număr de proprietăți de substituent folosind instrucțiunea de tranziție.
input::substituent (culoare: negru; tranziție: culoare 1s; ) input:focus::substituent (culoare: alb; )
ÎN browser Google Culoarea indicatoarelor Chrome atunci când vă concentrați pe un astfel de câmp se va schimba fără probleme în decurs de o secundă.