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.
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
Počnimo s primjerom za one koji još ne znaju šta je placeholder i kako ga koristiti:
Kada razvijate interfejse, trebalo bi da uzmete u obzir ponašanje čuvara mesta. Tekst čuvara mjesta nestaje čim počne kucanje. Zato ih ne biste trebali koristiti za prijenos informacija o samom polju za unos (koliko i koje znakove ono treba sadržavati). U ove svrhe najbolje je koristiti oznaku
Stilizacija
Sljedeća pravila se koriste za stiliziranje rezerviranih mjesta:
::-webkit-input-placeholder ( boja : plava ; ) ::-moz-placeholder ( boja: plava ; ) /* Firefox 19+ */ :-moz-placeholder ( boja: plava ; ) /* Firefox 18- * / :-ms-input-placeholder (boja: plava;)Izgleda užasno, zar ne? I postoji razlog za to - do sada, CSS pravila za placeholdere nisu bila standardizovana i implementacija je različita u svakom pretraživaču. Više informacija o svim potrebnim prefiksima možete pronaći na caniuse.
Ako koristite CSS pretprocesor, vjerovatno će vam biti najprijatnije da napišete jednostavan mixin za primjenu stilova na čuvare mjesta. Primjer u Sass-u:
@mixin čuvar mjesta ( & : :- webkit-input-placeholder ( @content ; ) & : - moz-placeholder ( @content ; ) & : :- moz-placeholder ( @content ; ) & : - ms-input-placeholder ( @content ;) )Ovisno o kontekstu, mixin se može koristiti za primjenu stilova bilo globalno ili na bazi pojedinačnih elemenata (isprobajte na SassMeister):
// Globalno za svako polje unosa@include placeholder ( boja : plava ; ) // Za određena polja za unos.input ( @include placeholder ( boja : zelena ; ) )Primjer
Plavi tekst za čuvar mjesta (nikada ovo ne radite):
.blue-text ::-webkit-input-placeholder ( boja : #2e8ece ; ) .blue-text :-moz-placeholder ( boja : #2e8ece ; ) .blue-text ::-moz-placeholder ( boja : #2e8ece ; ) .blue-text :-ms-input-placeholder ( boja : #2e8ece ; )
Podržana svojstva
Ne svaki CSS svojstvo može se koristiti sa čuvarima mjesta. Evo puna lista podržana svojstva:
- font i sva povezana svojstva (veličina fonta, porodica fontova, itd.)
- pozadina i sva povezana svojstva (boja pozadine, slika pozadine, itd.)
- neprozirnost
- uvlaka teksta
- text-overflow
- boja
- text-transform
- visina linije
- razmak između riječi
- slovni razmak
- tekst-dekoracija
- vertikalno poravnanje
Animacije
Ideje za animaciju pripadaju blogu html5.by.
Svi sljedeći primjeri su napisani korištenjem Sass pretprocesora. Svaki od njih dolazi sa vezom na SassMeister gdje možete pronaći kompajlirani CSS kod.
Najvjerovatnije ćete htjeti primijeniti animacije na čuvare mjesta kada je polje za unos fokus. Sve se to radi prilično jednostavno. Dovoljno je samo nekoliko puta upotrijebiti prethodno napisan mixin rezerviranog mjesta:
.input ( @include placeholder ( // Stilovi za normalno stanje) & :focus ( @include placeholder ( // Stilovi nakon događaja fokusa } } }Promijenite transparentnost
.input ( @include placeholder (boja: #aaa; neprozirnost: 1; prijelaz: neprozirnost 300ms;) & :focus (@include placeholder (prozirnost: 0;)))
Shift desno i lijevo
Što je polje za unos šire, to bi trebala biti veća vrijednost svojstva text-indent. Za standardno polje za unos će biti dovoljno 500px, a za šira treba ga odabrati ručno. Brzina animacije ovisi o širini polja za unos i vrijednosti uvlačenja teksta. Za pomicanje lijevo trebate koristiti negativne vrijednosti, na primjer -500px.
Shift dolje
Kao iu prethodnom primjeru, animacija ovisi o veličini ulaza, ali u ovom slučaju obratite pažnju na visinu. Za ogromnu većinu polja za unos, potrebna vrijednost visine linije bit će unutar 100px. Nažalost, svojstvo line-height ne može se koristiti za stvaranje efekta pomaka prema gore, jer svojstvo ne prihvaća negativne vrijednosti.
.input ( @include placeholder (text-indent : 0px ; prijelaz: text-indent 300ms ; ) & :focus ( @include placeholder (text-indent : 500px ; )))
Zajedno
Da bi korištenje animacijskog koda za rezervirane mjesta bilo prijatno i praktično, možete napisati malu biblioteku miksina za bilo koji predprocesor. Biblioteka izgleda ovako ():
@mixin čuvar mjesta ( & : :- webkit-input-placeholder ( @content ) & : - moz-placeholder ( @content ) & : :- moz-placeholder ( @content ) & : - ms-input-placeholder ( @content ) ) @mixin pl-shift ($side : lijevo , $position : 500px , $duration : 200ms ) ( @include placeholder ( text-indent : 0 ; prijelaz: text-indent $duration ; ) & :focus ( @include placeholder ( text-indent : if ($side == lijevo, - $position, $position); ) ) ) @mixin pl-slide-down ($position : 5 , $duration : 200ms ) ( @include placeholder ( line-height : 1 ; prijelaz : visina linije $duration ; ) & :focus ( @include rezervirano mjesto (visina linije: $pozicija ; ) ) ) @mixin pl-fade-out ($duration : 200ms ) ( @include rezervirano mjesto ( neprozirnost : 1 ; prijelaz : neprozirnost $duration ; ) & :focus ( @include placeholder ( neprozirnost : 0 ; ) ))Veoma je jednostavan za upotrebu. Dovoljno je povezati željeni mixin na bilo koje polje za unos ili jednostavno kreirati jedno globalno pravilo za sve pejsholdere na stranici:
// Za pojedinačne elemente.pl-shift-right ( @include pl-shift (desno); ) .pl-fade-out ( @include pl-fade-out ; ) // Za sve ostalo@include pl-shift (lijevo);Autoprefixer
Ako ne koristite predprocesor i još uvijek ne želite da se vaš CSS izvorni fajl pretvori u zbrku prefiksa koju svi mogu vidjeti mogući pretraživači, zatim obratite pažnju na Autoprefixer. Uz njegovu pomoć čisti CSS može se učiniti prljavim (ali u drugom fajlu) dodavanjem svih potrebnih prefiksa svim svojstvima. Da bi dodatak radio sa rezerviranim mjestima, samo koristite pseudoelement::placeholder:
::placeholder (boja: narandžasta;). input::placeholder(boja:plava;)Nakon raščlanjivanja vaših stilova, Autoprefixer će kreirati zasebnu CSS datoteku u koju će napisati sve potrebne prefikse za sve pretraživače koje ste naveli.
Šta je sledeće
Kao što sam gore napisao, sve što se tiče primjene stilova na rezervirane mjesta još uvijek nije standardizirano. Ovo će uskoro biti popravljeno. Specifikacija Selector Level 4 dodala je pseudo-klasu: placeholder-show, koja će konačno standardizirati ludu mješavinu pseudo-klasa i pseudo-elemenata koja trenutno postoji. Možete pratiti podršku na caniuseu (trenutno nije podržano ni u jednom pretraživaču).
Primjena stilova sa :placeholder-show bit će mnogo lakša:
.input :placeholder-show ( boja : plava ; )Zdravo, danas nećete nikoga iznenaditi korištenjem rezerviranog mjesta za unos. Čuvar mjesta je privremeni tekst s primjerom unutar unosa koji nestaje kada unesete tekst. Pokušaćemo da napišemo CSS stil za čuvar mesta danas.
Zadatak: napravite vlastiti CSS stil za čuvar mjesta
Recimo da imamo elegantnu web stranicu koja koristi rezervirano mjesto u unosu. Moramo učiniti da sivi, dosadni stil teksta čuvara mjesta izgleda u skladu s općim stilom web-mjesta. Kako se to može postići? Odmah ću reći da ovo još ne radi u svim pretraživačima. Konkretno, uopće ne radi u IE verzijama 9 i niže; u 10 i novijim verzijama i dalje radi s velikim poteškoćama. Firefox i webkit pretraživači su druga stvar.
Rešenje: css stil za čuvar mesta
Dakle, postavili smo zadatak, kako ćemo ga riješiti?
Prvo, napravimo poligon za testiranje:
Gotovo, sada da vidimo šta možemo da uradimo sa stilom: webkit i mozilla imaju svoje modifikatore koji vam omogućavaju da dodelite poseban stil čuvaru mesta: ::-webkit-input-placeholder i:-moz-placeholder. Pogledajmo kako ih koristiti:
Hajde da opišemo stil samog unosa i teksta u njemu (plava boja za kontrast u primeru):
Input( širina: 250px; boja: plava; font-weight: normalan; font-style: normal; )
Sada napišimo poseban stil za tekst čuvara mjesta u ovom unosu za Webkit pretraživače (Chrome, Safari, Opera):
Input::-webkit-input-placeholder( boja: crvena; stil fonta: italic; težina fonta: bold; )
Učinimo tekst čuvara mjesta crvenim bold italic. Imajte na umu da za razliku od drugih CSS pseudo-klasa, koje su odvojene jednom dvotočkom, stil za čuvanje mjesta u webkit-u je odvojen dvostrukom dvotočkom.
Hajde sada da napišemo potpuno isti stil za Mozilla Firefox pretraživači:
Unos:-moz-placeholder( boja: crvena; stil fonta: kurziv; težina fonta: bold; )
Spreman. CSS stil za čuvar mjesta, naravno možete napisati bilo koji koji je prikladniji za vaš dizajn. Radni demo možete pogledati na
Ako niste upoznati sa atributom placeholdera, hajde da objasnimo malo šta je to i gde se koristi. Koristi se u poljima za unos obrasca. Atribut prikazuje tekst u polju za unos koji predstavlja ulogu određenog nagoveštaja. Ranije je na našoj stranici bio primjer korištenja javascripta, pozitivna strana ovu metodu Kompatibilan je sa više pretraživača. Hajde sada da razgovaramo o oblikovanju atributa čuvara mesta, koji se koristi na elementima unosa i tekstualnog područja.
Kod polja za unos u našem primjeru će izgledati otprilike ovako:
Na izlazu dobijamo sledeće polje:
Sada zamislimo da trebamo stilizirati čuvar mjesta, za ovo moramo napisati skup pravila u CSS-u:
::-webkit-input-placeholder ( boja: #c1c1c1; ) ::-moz-placeholder ( boja: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( boja: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( boja: #c1c1c1; )
Dobijamo:
Ne možemo promijeniti sva svojstva, ali lista većine njih koje podržavaju moderni pretraživači je data u nastavku:
font(takođe povezane nekretnine)
pozadini(takođe povezane nekretnine)
boja
razmak između riječi
slovni razmak
tekst-dekoracija
vertikalno poravnanje
text-transform
visina linije
uvlaka teksta
text-overflow
neprozirnost
IN različitim pretraživačima pravilo je drugačije napisano, jer Iako ne postoji jedinstveni standard, ovaj skup evidencija je i dalje relevantan. U IE pretraživaču, kao i firefoxu ispod verzije 18, placeholder se doživljava kao pseudo-klasa, au novijim firefox pretraživači, webkit i blink se tretiraju kao pseudoelement.
Skraćivanje teksta u čuvaru mjesta
Ponekad opisi mogu biti toliko dugi da se ne mogu u potpunosti uklopiti u polje za unos. U ove svrhe možete koristiti i dodatna svojstva koja će vam omogućiti da skratite tekst čuvara mjesta u polju za unos.
Input ( text-overflow:ellipsis; ) input::-moz-placeholder ( text-overflow:ellipsis; ) input:-moz-placeholder ( text-overflow:ellipsis; ) input:-ms-input-placeholder (tekst-overflow :ellipsis;)
Kao rezultat, dobijamo polje za unos sa čuvarom mesta poput ovog:
Sakrijte tekst kada kliknete na polje
Podrazumevano, svaki pretraživač različito tumači odgovor čuvara mjesta. U nekim pretraživačima se sakriva odmah kada kliknete na polje, u drugim se sakriva kada postoji barem jedan znak u polju za unos. Neka tekst nestane kada kliknete na polje, isto u svim pretraživačima.
:focus::-webkit-input-placeholder ( boja: transparentna; ) :focus::-moz-placeholder ( boja: transparentna; ) :focus:-moz-placeholder ( boja: transparentna; ) :focus:-ms-input -placeholder (boja: transparentna;)
Dobijamo ovu akciju: