Cum să setați culoarea substituentului în css de intrare. Adăugați stil CSS pentru substituent

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 firefox sub versiunea 18, substituentul este perceput ca o pseudo-clasă, iar în browserele noi firefox, webkit și blink este perceput ca un 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 se va reduce text substituentîn câmpul de intrare.

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:

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. Puteți vedea o demonstrație de lucru pe jsFiddle sau chiar mai jos:

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

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 controla, trebuie să folosiți un special regula CSS substituent

Unde este substituentul?

Problema este că sfatul instrument al câmpului de intrare este ascuns ferm î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 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 Browsere Firefox versiunea de mai sus 19;
:-moz-placeholder - pentru Firefox 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;
căptușeală- umplutura. Nu este acceptat de toate browserele. Cât despre elemente inline, umplutura de sus și de jos sunt ignorate.
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ăîn linie - vertical-align;
decuparea textului atunci când containerul depășește - text-overflow.

.input1::substituent ( imagine de fundal: liniar-gradient(lime, albastru); culoare: alb; ) .input2::substituent (text-decor: line-through; culoare: violet; font-weight: bold; ) . input3::substituent (dimensiunea fontului: 16px; spațiere între litere: 10px; ) .input4::substituent (fundal: maro; culoare: alb; text-overflow: puncte de suspensie; ) Focalizare

În mod implicit, sfatul cu instrumente dispare din câmpul de introducere numai dacă este introdus cel puțin un caracter în el. Dar substituentul 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 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ă.

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 schimbarea stilurilor. Ș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; )