Cum se schimbă culoarea în substituent. Cum se schimbă culoarea textului alternativ al unui câmp de formular

Mulți dintre voi ați întâlnit adesea formulare care au semnături drept indicii. Ele dispar la tastare. Deci, acesta este atributul substituent, care este prezent pe elementele care sunt create pentru introducerea textului. Folosind-o, puteți seta textul care va fi afișat ca indiciu înainte de a începe să tastați în acest câmp. Din păcate, nu toate browserele funcționează la fel de corect cu acest atribut. Versiuni învechite iar acest text nu este afișat deloc.

Acum să vedem cum să rezolvăm problemele descrise mai jos:

1. Cum se schimbă stilurile de substituent;
2. Cum să ascunzi textul substituent nu atunci când tastați, ci când faceți clic pe câmp;
3. Ce să faci cu browserele în care substituentul nu este afișat în principiu.

În toate exemplele vom lucra cu câmpul de intrare.

Cum se schimbă culoarea textului indicativ în substituent în introducere? Nu mai este o știre că fiecare browser nu numai că afișează substituenți diferit, dar necesită și proprietăți speciale pentru a schimba stilurile. Și nici măcar nu vorbesc despre prefixele corespunzătoare din ortografie. Să ne uităm la ele.

Culoarea implicită pentru indicații explicative în multe browsere este gri. ÎN în acest exemplu Să-l facem negru.

::-webkit-input-placeholder (culoare:#000000; opacitate:1;)/* webkit */
::-moz-placeholder (culoare:#000000; opacitate:1;)/* Firefox 19+ */
:-moz-placeholder (culoare:#000000; opacitate:1;)/* Firefox 18- */
:-ms-input-placeholder (culoare:#000000; opacitate:1;)/* IE */

Proprietatea opacității, responsabil pentru transparență, trebuie introdus pentru acele browsere care acceptă transparență pentru a acestui element. În caz contrar, culoarea va fi gri ca implicită.

Și da, puteți folosi clase pentru a specifica aceste proprietăți. Privește jos:

Input-phone::-webkit-input-placeholder (culoare:roșu; )
.input-text::-webkit-input-placeholder (culoare:verde; )
/* și așa mai departe... */

Eliminarea substituentului la clic pe un câmp Implicit, în browsere, textul din atributul substituent dispare abia după începerea introducerii, dar există cei care doresc ca acest text să nu distragă atenția deja în etapa de clic pe câmpul de introducere. Cel mai adesea ei fac exact asta. Pentru a face acest lucru, trebuie să scrieți stiluri pentru focalizare, în care culoarea textului de tip tooltip va deveni complet transparentă, adică nu va mai fi vizibilă.

:focus::-webkit-input-placeholder (opacitate:0;)/* webkit */
:focus::-moz-placeholder (opacitate:0;)/* Firefox 19+ */
:focus:-moz-placeholder (opacitate:0;)/* Firefox 18- */
:focus:-ms-input-placeholder (opacitate:0;)/* IE */

Puteți chiar să configurați o schimbare lină a transparenței sau a culorii cu animația CSS. Dar pot apărea probleme cu compatibilitatea între browsere a unor astfel de soluții.

Dar browserele care nu acceptă atributul substituent în introducere? Ei bine, cu siguranță nu vă pierdeți) Da, într-adevăr, există astfel de browsere. De exemplu, IE8. Și da, există oameni adepți care îl vor folosi întotdeauna. Dacă trebuie să faceți o soluție pentru toți vizitatorii, atunci aveți puțină răbdare.

Pentru a rezolva această problemă, descărcați cel popular pentru aceasta plugin jquery- jquery.placeholder. Nu voi da link-uri, deoarece se vor schimba astăzi sau mâine. Dar, dacă este ceva, puteți descărca un exemplu de lucru cu pluginul - descărcați sursele.

Să-l conectăm. Nu uitați că trebuie să conectați și jquery.

$(funcție())(
$("input, textarea").placeholder();
});

input.placeholder, textarea.placeholder. (culoare: verde; )

Acest tutorial vă va arăta cum să schimbați culoarea textului substituent al unui câmp de formular.

Textul substituent al câmpului formular conține un sfat explicativ care indică datele așteptate în câmp. Acesta ar putea fi un exemplu sau scurta descriere informatiile asteptate. Un scurt indiciu este afișat în câmp înainte ca utilizatorul să înceapă să introducă date.

În mod implicit, textul alternativ este gri deschis (care este modul în care browserele îl afișează). Pentru a adăuga la acest text stiluri personalizate Va trebui să utilizați prefixele browserului pentru proprietățile CSS.

Pentru a schimba culoarea textului alternativ, urmați aceste instrucțiuni:

Cod conform următoarea informație(rețineți că trebuie să adăugați același cod de 4 ori pentru fiecare prefix de browser):

Selectați fișierul la care veți adăuga codul. Îl puteți adăuga la orice fișier CSS de pe site-ul dvs., dar am pregătit pentru dvs. o listă de fișiere în care este recomandat să adăugați reguli CSS Pentru tipuri diferite motoarele de site:

Șabloane CMS:

Teme WordPress (teme WooCommerce/Jigoshop) /wp-content/themes/themeXXXXX/style.css
Șabloane Joomla (șabloane VirtueMart) /templates/themeXXXX/css/template.css
Teme Drupal /sites/all/themes/themeXXX/css/style.css
Șabloane web (HTML5) /css/style.css

Șabloane de comerț electronic:

Teme Magento /skin/frontend /default/themeXXX/css/styles.css
Teme PrestaShop /themes/themeXXXX/css/global.css
Teme OpenCart /catalog/view/theme/themeXXX/stylesheet /stylesheet .css
Teme ZenCart /includes/templates/themeXXX/css/stylesheet .css
Șabloane osCommerce /css/stylesheet.css
Șabloane Shopify stil.css.lichid

Salvați modificările și încărcați fișiere CSS la serverul dvs.

Bună ziua, astăzi nu veți surprinde pe nimeni folosind un substituent pentru introducere. Substituent este un text temporar cu un exemplu în interiorul intrării, care dispare atunci când introduceți text. Stilul CSS pentru substituent, vom încerca să ne înregistrăm astăzi.

Sarcină: creați-vă propriul stil CSS pentru substituent

Să presupunem că avem un site web elegant care folosește un substituent în intrare. Trebuie să facem ca stilul gri sumbru al textului substituent stilul general site-ul. Cum se poate realiza acest lucru? Voi spune imediat că acest lucru nu funcționează încă în toate browserele. Mai exact, nu funcționează deloc în versiunile IE 9 și mai jos în 10 și mai târziu funcționează cu mare dificultate; Firefox și browserele webkit sunt o altă problemă.

Soluție: stilul css pentru substituent

Deci, am stabilit sarcina, cum o vom rezolva?

Mai întâi, să creăm un teren de testare:

Gata, acum să vedem ce putem face cu stilul: webkit și mozilla au propriii modificatori care vă permit să atribuiți un stil special substituentului: ::-webkit-input-placeholder și:-moz-placeholder. Să vedem cum să le folosim:

Să descriem stilul intrării în sine și textul din ea ( Culoarea albastră pentru contrast în exemplu):

Intrare( lățime: 250 px; culoare: albastru; greutate font: normal; stil font: normal; )

Acum să scriem un stil special pentru textul substituent din această intrare pentru browserele Webkit (Chrome, Safari, Opera):

Intrare::-webkit-input-placeholder (culoare: roșu; stil font: cursiv; greutate font: bold; )

Să facem textul substituentului roșu cursiv aldine. Rețineți că, spre deosebire de alte pseudoclase CSS, care sunt separate printr-un singur două puncte, stilul pentru substituent din webkit este separat prin două puncte.

Acum să scriem exact același stil pentru Mozilla Firefox browsere:

Intrare:-moz-placeholder(culoare: roșu; stil font: cursiv; greutate font: bold; )

Gata. Stilul CSS pentru substituent, bineînțeles că puteți scrie oricare care este mai potrivit pentru designul dvs. O demonstrație de lucru poate fi vizualizată pe jsFiddle sau chiar mai jos:

Sper că acest articol vă va ajuta să vă faceți site-ul mai ușor de utilizat.

Culoarea pseudo-element::placeholder (în unele cazuri pseudo-clasa) vă permite să setați conținutul textului unui element de formular. Este setat folosind substituentul: atribut.

Acest text poate fi stilat pentru majoritatea browserelor moderne folosind prefixe speciale:

::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ culoare: roz; ) ::-moz-placeholder ( /* Firefox 19+ */ culoare: roz; ) :-ms-input-placeholder ( /* IE 10+ */ culoare: roz ) :-moz-placeholder ( /* Firefox 18- */ culoare: roz; )

Avertisment: aceasta este o sintaxă non-standard și are nume ciudate asociate cu ea. :placeholder-shown este un standard și chiar și autorii specificației probabil cred că ::placeholder este standardizat.

Ca și în cazul oricărui pseudo-element, îl puteți aplica la anumite elemente in felul urmator:

input.big-dog::-webkit-input-placeholder (culoare: portocaliu; )

Vezi exemplu

Diferența dintre: substituent-afișat și::substituent

:placeholder-sown are scopul de a evidenția formularul de intrare și Substituent CSS culoarea este responsabilă pentru stilul textului.

Uită-te la diagramă:

Acest lucru se dovedește a fi confuz pentru mulți oameni și văd adesea specificații în care există :placeholder-shown, dar nu ::placeholder .

Trebuie remarcat faptul că :placeholder-sown poate afecta stilul textului, deoarece este pentru el element părinte(de exemplu, puteți schimba dimensiunea fontului).

Rețineți că :placeholder-shown este o pseudo-clasă (un element într-o stare concretă) și ::placeholder este un pseudo-element (partea vizibilă care nu este în DOM). Ele diferă prin ghilimele simple și duble.

Deoarece :placeholder-sown este o pseudo-clasă, trebuie să evidențieze un element existent. Și, prin urmare, evidențiază formularul de introducere atunci când este afișat textul din elementul de formular. Pseudo-elementul :: substituent cuprinde textul substituentului în sine.

Element sau clasă?

În acest plan substituent de intrare culoarea nu este standardizată. Aceasta înseamnă că fiecare browser are propria înțelegere a modului în care ar trebui să funcționeze.

Această pseudo-clasă a fost implementată inițial în browserul Firefox. Această pseudo-clasă nu oferă prea mult spațiu de mișcare. De exemplu, dacă doriți să schimbați culoarea textului atunci când evidențiați un formular de introducere, va trebui să utilizați un selector precum input:focus::placeholder . Dar pseudoclasa nu permite acest lucru.

IE10 acceptă această funcționalitate mai degrabă ca pseudo-clasă decât ca element. În toate celelalte browsere este tratat ca un pseudo-element.

Culoarea substituentului în Firefox

Veți observa că culoarea substituenților arată plictisitoare în comparație cu alte browsere. Imaginea de mai jos arată Firefox 43 în stânga și Chrome 47 în dreapta:

Acest lucru se întâmplă deoarece, implicit, toate stub-urile din Firefox primesc sens suplimentar transparenţă. Pentru a scăpa de acest efect, avem nevoie rândul următor cod:

::-moz-placeholder ( opacitate: 1; )

Încercați să deschideți această demonstrație în Firefox.

Suport stil

Pseudoelementul acceptă următoarele proprietăți:

proprietățile fontului;
culoare ;
proprietăți de fundal;
spațierea cuvintelor;
spațiul dintre litere ;
text-decor;
vertical-align ;
text-transform ;
inaltimea liniei;
text-indent ;
opacitate;

Resurse aditionale

Documentația MDN
Documentația IE
Articol detaliat pe blogul Treehouse

Dacă nu sunteți familiarizat cu atributul substituent, atunci să explicăm puțin ce este și unde este folosit. Este folosit în câmpurile de introducere a formularelor. Atributul afișează un text în câmpul de introducere, reprezentând rolul unui anumit indiciu. Mai devreme pe site-ul nostru a fost un exemplu, cu folosind javascript, Partea pozitivă aceasta metoda Este compatibil cu browsere încrucișate. Acum să vorbim despre stilizarea atributului substituent, care este folosit pe elementele de intrare și zona de text.
Codul câmpului de introducere din exemplul nostru va arăta cam așa:

La ieșire obținem următorul câmp:

Acum să ne imaginăm că trebuie să stilăm substituentul, pentru aceasta trebuie să scriem un set de reguli în CSS:

::-webkit-input-placeholder ( culoare: #c1c1c1; ) ::-moz-placeholder ( culoare: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( culoare: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder (culoare: #c1c1c1; )

Primim:

Nu putem schimba toate proprietățile, ci o listă a celor mai multe dintre ele care sunt acceptate browsere moderne este dat mai jos:
font (de asemenea, proprietăți înrudite)
fundal (de asemenea, proprietăți înrudite)
culoare
spațierea cuvintelor
spațiul dintre litere
text-decor
vertical-align
text-transformare
inaltimea liniei
text-indentare
text-debordare
opacitate

ÎN browsere diferite regula este scrisă altfel, pentru că Nu încă standard uniform, acest set de înregistrări continuă să fie actual. În browserul IE, precum și în Firefox sub versiunea 18, substituentul este perceput ca o pseudo-clasă, iar în cele mai noi browsere firefox, webkit și blink sunt tratate ca pseudo-element.

Scurtarea textului în substituent
Uneori, sfaturile instrumente pot fi atât de lungi încât nu se pot încadra complet în câmpul de introducere. În aceste scopuri puteți utiliza și proprietăți suplimentare, care vă va permite să scurtați textul substituent în câmpul de introducere.

Intrare ( text-overflow:elipse; ) input::-moz-placeholder ( text-overflow:elipse; ) input:-moz-placeholder ( text-overflow:elipse; ) input:-ms-input-placeholder ( text-overflow: :elipsă;

Ca rezultat, obținem un câmp de intrare cu un substituent ca acesta:

Ascundeți textul când faceți clic pe un câmp
În mod implicit, fiecare browser interpretează răspunsul substituentului în mod diferit. În unele browsere este ascuns imediat când dați clic pe câmp, în altele este ascuns când există cel puțin un caracter în câmpul de introducere. Să facem textul să dispară când dai clic pe câmp, la fel în toate browserele.

:focus::-webkit-input-placeholder (culoare: transparent; ) :focus::-moz-placeholder (culoare: transparent; ) :focus:-moz-placeholder (culoare: transparent; ) :focus:-ms-input -substituent (culoare: transparent; )

Obținem această acțiune: