Kako promijeniti boju teksta opisa alata u rezerviranom mjestu koristeći CSS stilove? Dodajte CSS stil za čuvar mesta Stil: promenite boju CSS čuvara mesta

Čuvari mjesta, oni često zasivljeni tekstualni elementi unutar unosa, mogu biti problem za stil. Srećom, pronašli smo kratko, ali efikasno CSS rešenje za stilizovanje teksta čuvara mesta u unosu bilo koje boje i neprozirnosti koju želite. Čitajte dalje za kod.

Promjena boje teksta čuvara mjesta

Počnimo s jednostavnim unosom i nekim tekstom za čuvanje mjesta, za ovaj primjer ćemo koristiti riječ "traži", ali možete koristiti sve što želite. Osnovni HTML je ispod:

HTML

Tekst čuvara mesta za unos (i tekstualno polje) podrazumevano je svetlo siva boja, međutim, to možemo promeniti sa nekoliko linija CSS-a. Ovdje ćemo obojiti ulazni tekst crvenom bojom koristeći HTML naziv boje, ali bilo koja metoda boje će biti dovoljna (HEX, RGB, HSL).

CSS
::-webkit-input-placeholder ( /* Chrome */ boja: crvena; ) :-ms-input-placeholder ( /* IE 10+ */ boja: crvena; ) ::-moz-placeholder ( /* Firefox 19 + */ boja: crvena; neprozirnost: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ boja: crvena; neprozirnost: 1; )

Imajte na umu da je važno uključiti različite prefikse dobavljača kako biste podržali što više pretraživača. Samo tekst čuvara mjesta za unos u Firefoxu ima zadanu malu prozirnost tako da nije potrebno postavljati svojstvo neprozirnosti na IE ili Chrome.

Promjena boje teksta fokusa čuvara mjesta

U redu, uspješno smo promijenili boju teksta čuvara mjesta u crvenu, ali bilo bi lijepo da se nešto dogodi kada korisnik klikne unutar našeg unosa. Koristeći ista CSS svojstva s prefiksom dobavljača, možemo promijeniti neprozirnost teksta čuvara mjesta za unos na fokus.

CSS
ulaz ( obris: nema; padding: 12px; granica-radijus: 3px; granica: 1px puna crna; ) ::-webkit-input-placeholder ( /* Chrome */ boja: crvena; prijelaz: neprozirnost 250 ms lakoća ulaska ; ) :focus::-webkit-input-placeholder (prozirnost: 0,5; ) :-ms-input-placeholder ( /* IE 10+ */ boja: crvena; prijelaz: neprozirnost 250ms lakoća ulaska; ) :focus :-ms-input-placeholder ( neprozirnost: 0,5; ) ::-moz-placeholder ( /* Firefox 19+ */ boja: crvena; neprozirnost: 1; prijelaz: neprozirnost 250ms lakoća ulaska; ) :focus:: -moz-placeholder ( neprozirnost: 0,5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ boja: crvena; neprozirnost: 1; prijelaz: neprozirnost 250ms lakoća ulaska; ) :focus:-moz-placeholder (prozirnost: 0,5; )

U gornjem primjeru ubacili smo nekoliko osnovnih stilova na sam unos i dodali prijelaz na neprozirnost kako bismo iskustvo učinili malo ljepšim. Pogledajte demo i eksperimentirajte s drugim CSS svojstvima i prijelazima.

Čuvar mjesta je element polja za unos u koji se može postaviti opis alata. Kada korisnik počne unositi podatke, prateći tekst nestaje kako ne bi smetao. Svaki pretraživač ima svoje mišljenje o tome kako ovaj element treba da bude prikazan, a ponekad podrazumevani stilovi razbijaju ceo dizajn. Da biste njima upravljali, morate koristiti posebno CSS pravilo za čuvanje mjesta.

Gdje je rezervirano mjesto?

Problem je u tome što je opis polja za unos čvrsto skriven u DOM-u u senci i nije tako lako doći do njega. Za to se koristi poseban nestandardni ::placeholder. Uz njegovu pomoć možete upravljati svojstvima opisa alata.

Stiliziranje čuvara mjesta u CSS-u izgleda ovako:

Input::placeholder (boja: crvena; neprozirnost: 1; stil fonta: kurziv; )

Podrška za pretraživač

Pseudo-element CSS čuvara mjesta se dobro rukuje u svim modernim pretraživačima, a za podršku starijim pretraživačima možete koristiti sljedeće prefikse:

  • ::-webkit-input-placeholder - za webkit pretraživače (Safari, Chrome, Opera);
  • ::-moz-placeholder - za Firefox pretraživače iznad verzije 19;
  • :-moz-placeholder - za stariji Firefox;
  • :-ms-input-placeholder - for Internet Explorer iznad verzije 10.

Kao što vidite, stari Mozilla pretraživači, kao i IE, smatraju placeholder CSS pseudo-klasu, a ne pseudo-element. Nemojmo se raspravljati s njima, samo ćemo uzeti u obzir ovaj aspekt prilikom stiliziranja polja za unos.

Opcije stilizovanja

Možete postaviti sljedeće opcije za pseudo-element čuvara mjesta u CSS-u:

  • pozadina - grupa blokova opisa alata primjenjuje se na cijelo polje za unos. Možete podesiti ne samo boju (background-color), već i sliku (background-image).
  • boja teksta - boja;
  • transparentnost - neprozirnost;
  • podvlačenje, precrtavanje ili precrtavanje - dekoracija teksta;
  • case - text-transform;
  • unutrašnja uvlačenja - padding. Nije podržan od strane svih pretraživača. Kao i kod inline elemenata, gornji i donji padding se zanemaruje.
  • prikaz fonta - svojstva grupe fontova, visina reda i razna uvlaka (uvlaka teksta, razmaka slova, razmaka riječi);
  • vertikalno poravnanje u liniji - vertikalno poravnanje;
  • obrezivanje teksta kada se kontejner prepuni - text-overflow.
.input1::placeholder (slika pozadine: linearni-gradijent (lime, plava); boja: bijela; ) .input2::placeholder (tekst-dekoracija: kroz liniju; boja: ljubičasta; težina fonta: bold; ) . input3::placeholder (font-size: 16px; slovni razmak: 10px; ) .input4::placeholder (pozadina: smeđa; boja: bijela; text-overflow: ellipsis; )

U fokusu

Podrazumevano, opis alata nestaje iz polja za unos samo ako se u njega unese barem jedan znak. Ali čuvar mjesta vam omogućava da odmah implementirate nestanak kada se fokusirate na polje. Da biste to učinili, trebate ga kombinirati s pseudo-class:focus.

Input:focus::placeholder ( boja: transparentna; )

U nekim pretraživačima moguće je animirati promjene u brojnim svojstvima čuvara mjesta pomoću izraza prijelaza.

Input::placeholder ( boja: crna; prijelaz: boja 1s; ) input:focus::placeholder ( boja: bijela; )

IN Google pretraživač Boja Chrome opisa alata kada se fokusirate na takvo polje će se glatko promijeniti u roku od jedne sekunde.

Atribut placeholder se koristi za kreiranje opisa alata unutar praznih polja za unos (tagova I