Dizajn rezerviranog mjesta css. Kako promijeniti boju teksta opisa alata u rezerviranom mjestu pomoću CSS stilova? Gdje je rezervirano mjesto

Mnogi od vas često su nailazili na obrasce koji imaju potpise kao savjete. Nestaju prilikom tipkanja. Dakle, ovo je atribut rezerviranog mjesta, koji je prisutan na elementima koji su stvoreni za unos teksta (unos). Pomoću njega možete postaviti tekst koji će biti prikazan kao savjet prije nego što počnete tipkati u ovo polje. Nažalost, ne rade svi preglednici jednako ispravno s ovim atributom. Zastarjele verzije uopće ne prikazuju ovaj tekst.

Sada pogledajmo kako riješiti dolje opisane probleme:

1. Kako promijeniti stil rezerviranog mjesta;
2. Kako sakriti tekst rezerviranog mjesta ne kada tipkate, već kada kliknete na polje;
3. Što učiniti s preglednicima u kojima se rezervirano mjesto u principu ne prikazuje.

U svim primjerima radit ćemo s poljem za unos.

Kako promijeniti boju teksta opisa alata u rezerviranom mjestu u unosu? Više nije novost da svaki preglednik ne samo da drugačije prikazuje rezervirana mjesta, već zahtijeva i posebna svojstva za promjenu stilova. A o odgovarajućim prefiksima u pravopisu i ne govorim. Pogledajmo ih.

Zadana boja opisa alata u mnogim preglednicima je siva. U u ovom primjeru Učinimo ga crnim.

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

Svojstvo opacity, koje je odgovorno za transparentnost, mora se unijeti za one preglednike koji podržavaju transparentnost za ovaj element. Inače će boja biti siva kao zadana.

I da, možete koristiti klase za određivanje ovih svojstava. Pogledaj ispod:

Input-phone::-webkit-input-placeholder ( boja:crvena; )
.input-text::-webkit-input-placeholder ( boja:zelena; )
/* i tako dalje... */

Uklanjanje rezerviranog mjesta prilikom klika na polje Prema zadanim postavkama, u preglednicima, tekst iz atributa rezerviranog mjesta nestaje tek nakon početka unosa, ali postoje oni koji žele da ovaj tekst ne ometa već u fazi klikanja na polje za unos. Najčešće rade upravo to. Da biste to učinili, morate napisati stilove za fokus, gdje će boja teksta tooltip-a postati potpuno prozirna, odnosno više neće biti vidljiva.

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

Možete čak postaviti glatku promjenu prozirnosti ili promjenu boje pomoću CSS animacije. Ali može doći do problema s kompatibilnošću takvih rješenja s više preglednika.

Što je s preglednicima koji ne podržavaju atribut rezerviranog mjesta u unosu? Pa, definitivno se nemojte izgubiti) Da, doista, postoje takvi preglednici. Na primjer, IE8. I da, postoje vješti ljudi koji će to uvijek koristiti. Ako trebate napraviti rješenje za sve posjetitelje, onda imajte još malo strpljenja.

Kako biste riješili ovaj problem, preuzmite popularni jquery dodatak za ovo - jquery.placeholder. Neću davati linkove, jer će se promijeniti danas ili sutra. Ali, ako ništa drugo, možete preuzeti radni primjer s dodatkom - preuzmite izvore.

Spojimo ga. Ne zaboravite da također morate spojiti jquery.

$(funkcija())(
$("unos, tekstualno područje").placeholder();
});

input.placeholder, textarea.placeholder. (boja: zelena;)

Pseudoelement koji postavlja stil teksta opisa alata kreiranog atributom rezerviranog mjesta. Možete koristiti svojstva za promjenu izgleda teksta, na primjer, postaviti font i boju.

Sintaksa

Selektor::placeholder ( ... )

Oznake Primjer opisa

	Označava vrstu vrijednosti.
A & & B	Vrijednosti se moraju ispisati navedenim redoslijedom.	&&
A \| B	Označava da trebate odabrati samo jednu vrijednost od predloženih (A ili B).	normalno \| malim slovima
A \|\| B	Svaka se vrijednost može koristiti samostalno ili zajedno s drugima bilo kojim redoslijedom.	širina \|\| računati
	Vrijednosti grupa.	[ obrezivanje \|\| križ ]
*	Ponovite nula ili više puta.	[,]*
+	Ponovite jednom ili više puta.	+
?	Navedena vrsta, riječ ili grupa nisu obavezni.	umetak?
(A, B)	Ponovite najmanje A, ali ne više od B puta.	{1,4}
#	Ponovite jednom ili više puta odvojene zarezima.	#

Primjer

tijelo rezerviranog mjesta ( pozadina: #053f38; ) unos ( obrub: 1px solid #98baba; /* Opcije obruba */ pozadina: prozirna; /* Prozirna pozadina*/ ispuna: 1px 4px; /* Margine oko teksta */ boja: #fff; /* Boja teksta */ ) input::-moz-placeholder (boja: #ffd595; /* Boja alatnih opisa */) input::-webkit-input-placeholder (boja: #ffd595; ) input:-ms-input - rezervirano mjesto (boja: #ffd595;) input::-ms-input-zadržano mjesto (boja: #ffd595;) input::zadržano mjesto (boja: #ffd595;)

Rezultat primjera prikazan je na sl. 1.

Riža. 1. Korištenje::placeholder

Bilješka

Internet Explorer koristi pseudo-klasu :-ms-input-placeholder.

Microsoft Edge koristi pseudoelement ::-ms-input-placeholder.

Chrome prije verzije 57, Opera prije verzije 44, Safari prije verzije 10.1 i Android koriste pseudoelement ::-webkit-input-placeholder.

Firefox od verzije 4 do 19 koristi pseudoklasu :-moz-placeholder.

Firefox prije verzije 51 koristi pseudoelement ::-moz-placeholder.

Preglednici

U tablici preglednika koriste se sljedeće oznake.

Atribut rezerviranog mjesta koristi se za pozive na radnju unutar praznih elemenata unosa i tekstualnog područja. U ovom ćemo članku pogledati mogućnosti oblikovanja teksta rezerviranog mjesta, kao i neke trikove koji će ga učiniti praktičnijim i funkcionalnijim.

Dakle, počnimo s primjerom za one koji ne znaju što je rezervirano mjesto.

html

Stil rezerviranog mjesta može se promijeniti pomoću sljedećeg skupa css pravila:

css ::-webkit-input-placeholder (color:#c0392b;) ::-moz-placeholder (color:#c0392b;)/* Firefox 19+ */ :-moz-placeholder (color:#c0392b;)/* Firefox 18- */ :-ms-input-placeholder (color:#c0392b;)

Izgleda zastrašujuće, zar ne? Činjenica je da to još uvijek nije u standardima. Svaki preglednik implementira podršku za stil rezerviranog mjesta na svoj način.

U IE i starijem firefoxu (prije 18), rezervirano mjesto smatra se pseudoklasom, a u novi firefox, webkit i blink - pseudoelement.

Da vidimo što se dogodilo:

Mora se reći da nisu podržane sve moguće opcije. css svojstva. Većina modernih preglednika omogućuje promjenu:

font (i povezana svojstva)
pozadina (i povezana svojstva)
boja
razmak između riječi
razmak između slova
tekst-ukras
okomito poravnati
tekstualna transformacija
linija-visina
tekstualna uvlaka
text-overflow
neprozirnost

Što ako rezervirano mjesto ne odgovara?

Ponekad su polja za unos teksta smanjena u širinu zbog značajki izgleda, osobito na mobilnim uređajima. U ovom slučaju dugačak tekst rezervirano mjesto bit će ružno odrezano. Da biste to spriječili, možete koristiti text-overflow: ellipsis. Ova će sintaksa raditi u svim novim preglednicima.

css input (text-overflow:ellipsis;) input::-moz-placeholder (text-overflow:ellipsis;) input:-moz-placeholder (text-overflow:ellipsis;) input:-ms-input-placeholder (text- overflow:ellipsis;) Kako sakriti rezervirano mjesto u fokusu?

Sakrivanje rezerviranog mjesta događa se na različite načine.

u nekim preglednicima prilikom primanja fokusa unosom

u drugim preglednicima ako je unesen barem jedan znak

Više mi se sviđa prva opcija. Kako bismo postavili ovo ponašanje u svim preglednicima koji podržavaju rezervirano mjesto, definirat ćemo sljedeća CSS pravila:

css :focus::-webkit-input-placeholder (boja: prozirna) :focus::-moz-placeholder (boja: prozirna) :focus:-moz-placeholder (boja: prozirna) :focus:-ms-input-placeholder (boja: prozirna) Lijepo sakrijte rezervirano mjesto

Također možete dodati prijelaz da biste prikazali i sakrili rezervirano mjesto:

css /* glatka promjena prozirnosti rezerviranog mjesta kada je fokus */ .input1::-webkit-input-placeholder (neprozirnost: 1; prijelaz: neprozirnost 0,3s lakoća;) .input1::-moz-placeholder (neprozirnost: 1; prijelaz: neprozirnost 0,3 s lakoća;) .input1:-moz-placeholder (neprozirnost: 1; prijelaz: neprozirnost 0,3 s lakoća;) .input1:-ms-input-placeholder (neprozirnost: 1; prijelaz: neprozirnost 0,3 s lakoća;) :focus::-webkit-input-placeholder (neprozirnost: 0; prijelaz: neprozirnost 0,3 s lakoća;).input1:focus::-moz-placeholder (neprozirnost: 0; prijelaz: neprozirnost 0,3 s lakoća;).input1: fokus :-moz-placeholder (opacity: 0; prijelaz: neprozirnost 0.3s lakoća;) .input1:focus:-ms-input-placeholder (opacity: 0; prijelaz: neprozirnost 0.3s lakoća;) /* pomaknite rezervirano mjesto udesno u fokusu*/ .input2::-webkit-input-placeholder (text-indent: 0px; prijelaz: text-indent 0.3s lakoća;).input2::-moz-placeholder (text-indent: 0px; prijelaz: text- indent 0.3s ease;) .input2:-moz-placeholder (text-indent: 0px; prijelaz: text-indent 0.3s ease;).input2:-ms-input-placeholder (text-indent: 0px; prijelaz: lakoća uvlačenja teksta 0,3 s;).input2:focus::-webkit-input-placeholder (uvlaka teksta: 500px; prijelaz: lakoća uvlačenja teksta 0,3 s;).input2:focus::-moz-placeholder ( text-indent: 500px; prijelaz: text-indent 0.3s ease;).input2:focus:-moz-placeholder (text-indent: 500px; prijelaz: text-indent 0.3s ease;).input2:focus:-ms- input-placeholder (text-indent: 500px; prijelaz: text-indent 0.3s ease;) /* pomicanje rezerviranog mjesta prema dolje kada je fokus */ .input3::-webkit-input-placeholder (line-height: 20px; prijelaz: linija -height 0.5s lakoća;).input3::-moz-placeholder (line-height: 20px; prijelaz: line-height 0.5s ease;).input3:-moz-placeholder (line-height: 20px; prijelaz: linija - visina 0,5 s lakoća;).input3:-ms-input-placeholder (line-height: 20px; prijelaz: line-height 0,5s ease;).input3:focus::-webkit-input-placeholder (line-height: 100px ; prijelaz: visina linije 0,5 s jednostavnost;).input3:focus::-moz-placeholder (line-height: 100px; prijelaz: visina linije 0,5 s jednostavnost;).input3:focus:-moz-placeholder (linija - visina: 100px; prijelaz: visina linije 0,5s lakoća;) .input3:focus:-ms-input-placeholder (visina linije: 100px; prijelaz: visina linije 0,5s lakoća;)

Nadam se da će vam ovo biti od koristi. Komentare i prijedloge napišite u komentarima.

Placeholder je element polja za unos u koji se može smjestiti tooltip. Kada korisnik počne unositi podatke, popratni tekst nestaje kako ne bi smetao. Svaki preglednik ima svoje mišljenje o tome kako bi ovaj element trebao biti prikazan, a ponekad zadani stilovi kvare cijeli dizajn. Da biste ih kontrolirali, morate koristiti poseban CSS pravilo rezervirano mjesto

Gdje je rezervirano mjesto?

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

Stiliziranje rezerviranog mjesta u CSS-u izgleda ovako:

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

Podrška za preglednik

Pseudoelementom CSS rezerviranog mjesta svi dobro rukuju moderni preglednici, a za podršku starijim preglednicima možete koristiti prefikse:

::-webkit-input-placeholder - za webkit preglednike (Safari, Chrome, Opera);
::-moz-placeholder - za Firefox preglednici iznad verzije 19;
:-moz-placeholder - za stari Firefox;
:-ms-input-placeholder - za Internet Explorer iznad verzije 10.

Kao što vidite, stari Mozilla preglednici, kao i IE, rezervirano mjesto smatraju CSS pseudo-klasom, a ne pseudo-elementom. Nemojmo se svađati s njima, samo ćemo ovaj aspekt uzeti u obzir prilikom oblikovanja polja za unos.

Mogućnosti stiliziranja

Možete postaviti sljedeće opcije za pseudoelement rezerviranog mjesta u CSS-u:

pozadina - skupina blokova s opisom alata primjenjuje se na cijelo polje za unos. Možete postaviti ne samo boju (background-color), već i sliku (background-image).
boja teksta - boja;
transparentnost - neprozirnost;
podcrtavanje, precrtavanje ili precrtavanje - tekst-ukras;
slučaj - transformacija teksta;
podstava- podstava. Ne podržavaju svi preglednici. Kao i kod umetnutih elemenata, gornje i donje ispune se zanemaruju.
prikaz fontova - svojstva grupe fontova, visina retka i razne uvlake (uvlaka teksta, razmak između slova, razmak između riječi);
okomito poravnanje u liniji - vertical-align;
skraćivanje teksta kada se spremnik prelije - text-overflow.

.input1::placeholder (pozadinska slika: linearni gradijent (limeta, plava); boja: bijela; ) .input2::placeholder (tekst-ukras: kroz liniju; boja: ljubičasta; težina fonta: podebljano; ) . input3::placeholder (veličina fonta: 16px; razmak između slova: 10px; ) .input4::placeholder (pozadina: smeđa; boja: bijela; text-overflow: elipsa; ) U fokusu

Prema zadanim postavkama, opis alata nestaje iz polja za unos samo ako se u njega unese barem jedan znak. Ali rezervirano mjesto vam omogućuje 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: prozirna; )

U nekim preglednicima moguće je animirati promjene u brojnim svojstvima rezerviranih mjesta pomoću naredbe prijelaza.

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

U Google preglednik Chromeova boja opisa alata pri fokusiranju na takvo polje glatko će se promijeniti unutar jedne sekunde.

Obično se atribut rezerviranog mjesta na ulazu i tekstualnom području koristi za pružanje poziva na radnju unutar tih elemenata. U ovom postu opisat ću nekoliko opcija za stiliziranje teksta rezerviranih mjesta, kao i opcije za njihovu animaciju

Dakle, boja teksta našeg rezerviranog mjesta može se promijeniti pomoću, na primjer, sljedećeg skupa CSS pravila:

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

Duljina koda za stiliziranje tako jednostavnog svojstva uzrokovana je nedostatkom zajedničkog standarda, pa je stoga svaki preglednik implementirao podršku za stiliziranje rezerviranog mjesta na svoj način.

Osim toga, nisu podržana sva CSS svojstva. Evo popisa točno podržanih svojstava:

font (i srodni)
pozadina (i srodno)
boja
razmak između riječi
razmak između slova
tekst-ukras
okomito poravnati
tekstualna transformacija
linija-visina
tekstualna uvlaka
tekst-preljev
neprozirnost

Također se događa da tekst rezerviranog mjesta "proširuje" širinu elementa unosa ili textarea (čest slučaj za mobilni uređaji). Istodobno se automatski odrezuje neugledno.

CSS svojstvo poput text-overflow: ellipsis pomoći će nam da riješimo ovaj problem, što će dodati estetsku elipsu izrezanom području rezerviranog mjesta. U stilovima pišemo ovako:

input [ placeholder ] ( text-overflow : ellipsis ;) input ::-moz-placeholder ( text-overflow : ellipsis ;) input :-moz-placeholder ( text-overflow : ellipsis ;) input :-ms-input-placeholder ( text-overflow : elipsa ;)

Da bismo dodali još više estetike našim rezerviranim mjestima, moguće je dodati efekt skrivanja kada odgovarajući element dobije fokus.

Neki primjeri takvog skrivanja s elementima animacije:

/* glatka promjena prozirnosti rezerviranog mjesta kada je fokus */ .input ::-webkit-input-placeholder ( neprozirnost : 1 ; prijelaz : neprozirnost 0,3 s lakoća ;) .input ::-moz-placeholder ( neprozirnost : 1 ; prijelaz : neprozirnost 0.3s lakoća ;).input :-moz-placeholder ( neprozirnost : 1 ; prijelaz : neprozirnost 0.3s lakoća ;).input :-ms-input-placeholder ( neprozirnost : 1 ; prijelaz : neprozirnost 0.3s lakoća ;).input ( neprozirnost : 0 ; prijelaz : neprozirnost 0,3 s lakoća ;) .input :focus::-moz-placeholder ( neprozirnost : 0 ; prijelaz : neprozirnost 0,3 s lakoća ;) .input :focus:-moz-placeholder ( neprozirnost : 0 ; prijelaz : neprozirnost 0,3 s jednostavnost ;) .input :focus:-ms-input-placeholder ( neprozirnost : 0 ; prijelaz : neprozirnost 0,3 s jednostavnost ;) /* pomaknite rezervirano mjesto udesno kada je fokus */ .input ::-webkit- input-placeholder ( text-indent : 0px ; prijelaz : text-indent 0.3s ease ;).input ::-moz-placeholder (text-indent : 0px ; prijelaz : text-indent 0.3s ease ;).input :-moz -placeholder (uvlaka teksta: 0px;

prijelaz : lakoća uvlačenja teksta 0,3 s ;).input :-ms-input-placeholder ( uvlaka teksta : 0px ; prijelaz : lakoća uvlačenja teksta 0,3 s ;).input :focus::-webkit-input-placeholder ( tekst -indent : 500px ; prijelaz : text-indent 0.3s ease ;).input :focus::-moz-placeholder ( text-indent : 500px ; conversion : text-indent 0.3s ease ;).input :focus:-moz- placeholder (text-indent: 500px; prijelaz: text-indent 0.3s ease;).input :focus:-ms-input-placeholder (text-indent: 500px; prijelaz: text-indent 0.3s ease;) /* pomak rezerviranog mjesta -a dolje na fokusu*/ .input ::-webkit-input-placeholder ( line-height : 20px ; prijelaz : line-height 0.5s lakoća ;).input ::-moz-placeholder ( line-height : 20px ; prijelaz : line-height 0.5s lakoća ;).input :-moz-placeholder ( line-height : 20px ; prijelaz : line-height 0.5s lakoća ;).input :-ms-input-placeholder ( line-height : 20px ; prijelaz : line-height 0.5s lakoća ;) .input :focus::-webkit-input-placeholder ( line-height : 100px ;