Kako spremeniti barvo besedila opisa orodja v označbi mesta z uporabo slogov CSS? Dodajte slog CSS za nadomestni slog Slog: spremenite barvo nadomestnega CSS
Oznake mest, tiste pogosto zatemnjene besedilne elemente znotraj vnosa, je lahko težko oblikovati. Na srečo smo našli kratko, a učinkovito rešitev CSS za oblikovanje besedila nadomestnega mesta vašega vnosa poljubne barve in motnosti. Preberite kodo.
Spreminjanje barve besedila nadomestnega znaka
Začnimo s preprostim vnosom in nekaj nadomestnega besedila, za ta primer bomo uporabili besedo "iskanje", vendar lahko uporabite karkoli želite. Osnovni HTML je spodaj:
HTML
Besedilo nadomestnega mesta za vnos (in polje besedila) je privzeto nastavljeno na svetlo sivo barvo, vendar lahko to spremenimo z nekaj vrsticami CSS. Tukaj bomo vhodno besedilo obarvali rdeče z imenom barve HTML, vendar bo zadostovala katera koli barvna metoda (HEX, RGB, HSL).
CSS
::-webkit-input-placeholder ( /* Chrome */ barva: rdeča; ) :-ms-input-placeholder ( /* IE 10+ */ barva: rdeča; ) ::-moz-placeholder ( /* Firefox 19 + */ barva: rdeča; motnost: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ barva: rdeča; motnost: 1; )Upoštevajte, da je pomembno vključiti predpone različnih proizvajalcev, da bi podprli čim več brskalnikov. Samo besedilo vnosnega nadomestnega mesta Firefoxa je privzeto nastavljeno na rahlo prosojnost, zato ni treba nastavljati lastnosti motnosti v IE ali Chromu.
Spreminjanje barve besedila fokusa nadomestnega znaka
V redu, uspešno smo spremenili barvo besedila označbe mesta v rdečo, vendar bi bilo lepo, če bi se kaj zgodilo, ko uporabnik klikne znotraj našega vnosa. Z uporabo istih lastnosti CSS s predpono prodajalca lahko spremenimo motnost besedila označbe mesta v fokusu.
CSS
vnos ( obris: brez; oblazinjenje: 12 slikovnih pik; polmer obrobe: 3 slikovne pike; obroba: 1 slikovna piksa polna črna; ) ::-webkit-input-placeholder ( /* Chrome */ barva: rdeča; prehod: motnost 250 ms enostavnost vstopa ven ; ) :focus::-webkit-input-placeholder ( neprozornost: 0,5; ) :-ms-input-placeholder ( /* IE 10+ */ barva: rdeča; prehod: motnost 250 ms enostavnost vstopa navzven; ) :focus :-ms-input-placeholder ( neprosojnost: 0,5; ) ::-moz-placeholder ( /* Firefox 19+ */ barva: rdeča; motnost: 1; prehod: motnost 250 ms poenostavi-v-ven; ) :focus:: -moz-placeholder ( neprozornost: 0,5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ barva: rdeča; motnost: 1; prehod: motnost 250 ms enostavnost vstopa navzven; ) :focus:-moz-placeholder (motnost: 0,5; )V zgornjem primeru smo dodali nekaj osnovnih slogov na samem vnosu in dodali prehod na motnosti, da bi bila izkušnja le malo lepša. Oglejte si predstavitev in eksperimentirajte z drugimi lastnostmi in prehodi CSS.
Oznaka mesta je element vnosnega polja, v katerega se lahko postavi namig orodja. Ko uporabnik začne vnašati podatke, spremno besedilo izgine, da ne moti. Vsak brskalnik ima svoje mnenje o tem, kako naj bo ta element prikazan, včasih pa privzeti slogi porušijo celotno zasnovo. Če jih želite upravljati, morate uporabiti posebno pravilo nadomestnega mesta CSS.
Kje je nadomestni znak?
Težava je v tem, da je opis orodja za vnosno polje trdno skrit v senčnem DOM in do njega ni tako enostavno priti. Za to se uporablja posebno nestandardno ::placeholder. Z njegovo pomočjo lahko upravljate lastnosti namiga orodja.
Oblikovanje nadomestnega znaka v CSS izgleda takole:
Input::placeholder (barva: rdeča; motnost: 1; slog pisave: poševno; )
Podpora za brskalnik
Vsi sodobni brskalniki dobro obdelujejo psevdoelement nadomestnega znaka CSS, za podporo starejšim brskalnikom pa lahko uporabite naslednje predpone:
- ::-webkit-input-placeholder - za brskalnike webkit (Safari, Chrome, Opera);
- ::-moz-placeholder - za brskalnike Firefox nad različico 19;
- :-moz-placeholder - za starejši Firefox;
- :-ms-input-placeholder - za internet Explorer nad različico 10.
Kot vidite, stari Brskalniki Mozilla, kot tudi IE, menijo, da je nadomestni znak psevdorazred CSS in ne psevdoelement. Ne prepirajmo se z njimi, le ta vidik bomo upoštevali pri oblikovanju vnosnega polja.
Možnosti oblikovanja
Za psevdoelement nadomestnega znaka v CSS lahko nastavite naslednje možnosti:
- ozadje - skupina blokov orodnih namigov velja za celotno vnosno polje. Nastavite lahko ne samo barvo (background-color), temveč tudi sliko (background-image).
- barva besedila - barva;
- prosojnost - motnost;
- podčrtavanje, prečrtanje ali prečrtanje - besedilo-okras;
- case - pretvorba besedila;
- notranje alineje – padding. Ne podpirajo vsi brskalniki. Tako kot pri elementih v vrstici se zgornje in spodnje oblazinjenje ne upoštevata.
- prikaz pisave - lastnosti skupine pisav, višine vrstice in različnih zamikov (zamik besedila, razmik med črkami, razmik med besedami);
- navpična poravnava v vrstici - vertical-align;
- obrezovanje besedila, ko se vsebnik prepolni - text-overflow.
V fokusu
Privzeto namig orodja izgine iz vnosnega polja le, če je vanj vnesen vsaj en znak. Toda mesto vam omogoča, da izginotje izvedete takoj, ko se osredotočite na polje. Če želite to narediti, ga morate združiti s psevdo-razredom: fokus.
Input:focus::placeholder ( barva: prozorna; )
V nekaterih brskalnikih je mogoče animirati spremembe v številnih lastnostih nadomestnih znakov z uporabo stavka prehoda.
Input::placeholder (barva: črna; prehod: barva 1s; ) input:focus::placeholder (barva: bela; )
IN Googlov brskalnik Barva orodnih namigov za Chrome, ko se osredotočite na takšno polje, se gladko spremeni v eni sekundi.
Atribut placeholder se uporablja za ustvarjanje namigov orodij znotraj praznih vnosnih polj (oznak in
Začnimo s primerom za tiste, ki še ne vedo, kaj je nadomestni znak in kako ga uporabljati:
Ko razvijate vmesnike, morate upoštevati obnašanje ograd. Nadomestno besedilo izgine takoj, ko se začne tipkati. Zato jih ne smete uporabljati za prenos informacij o samem vnosnem polju (koliko in katere znake naj vsebuje). Za te namene je najbolje uporabiti oznako
Stilizacija
Za oblikovanje nadomestnih mest se uporabljajo naslednja pravila:
::-webkit-input-placeholder (barva: modra;) ::-moz-placeholder (barva: modra;) /* Firefox 19+ */ :-moz-placeholder (barva: modra;) /* Firefox 18- * / :-ms-input-placeholder (barva: modra;)Izgleda grozno, kajne? In za to obstaja razlog – do zdaj pravila CSS za nadomestne oznake niso bila standardizirana in implementacija je drugačna v vsakem brskalniku. Več informacij o vseh potrebnih predponah lahko najdete na caniuse.
Če uporabljate predprocesor CSS, vam bo verjetno najbolj udobno napisati preprost mixin za uporabo slogov na ogradah. Primer v Sass:
@mixin placeholder ( & : :- webkit-input-placeholder ( @content ; ) & : - moz-placeholder ( @content ; ) & : :- moz-placeholder ( @content ; ) & : - ms-input-placeholder ( @vsebina ;))Odvisno od konteksta se lahko mixin uporablja za uporabo slogov bodisi globalno bodisi na osnovi posameznega elementa (preizkusite na SassMeister):
// Globalno za vsako vnosno polje@include placeholder (barva: modra;) // Za določena vnosna polja.input ( @include placeholder (barva: zelena;))Primer
Modro besedilo za ogrado (tega nikoli ne storite):
.blue-text ::-webkit-input-placeholder (barva: #2e8ece;) .blue-text:-moz-placeholder (barva: #2e8ece;) .blue-text ::-moz-placeholder (barva: #2e8ece ; ) .blue-text :-ms-input-placeholder ( barva : #2e8ece ; )
Podprte lastnosti
Ne vsak Lastnost CSS se lahko uporablja z ogradami. Tukaj celoten seznam podprte lastnosti:
- pisava in vse povezane lastnosti (velikost pisave, družina pisav itd.)
- ozadje in vse povezane lastnosti (barva ozadja, slika ozadja itd.)
- nepreglednost
- zamik besedila
- text-overflow
- barva
- preoblikovanje besedila
- višina vrstice
- razmik med besedami
- razmik med črkami
- besedilo-okras
- navpično poravnati
Animacije
Ideje za animacijo pripadajo blogu html5.by.
Vsi naslednji primeri so napisani s predprocesorjem Sass. Vsak ima povezavo do SassMeister, kjer lahko najdete prevedeno kodo CSS.
Najverjetneje boste želeli uporabiti animacije za ograde, ko je polje za vnos fokus. Vse to se naredi precej preprosto. Dovolj je, da samo nekajkrat uporabite predhodno napisani placeholder mixin:
.input ( @include placeholder ( // Slogi za normalno stanje) & :focus ( @include placeholder ( // Slogi po dogodku fokusa } } }Spremenite preglednost
.input (@include placeholder (barva: #aaa; motnost: 1; prehod: motnost 300ms;) & :focus (@include placeholder (motnost: 0;)))
Premik desno in levo
Širše kot je vnosno polje, večja mora biti vrednost lastnosti text-indent. Za standardno vnosno polje bo dovolj 500px, za širša pa ga izberite ročno. Hitrost animacije je odvisna od širine vnosnega polja in vrednosti zamika besedila. Za premik v levo morate uporabiti negativne vrednosti, na primer -500px.
Prestavite navzdol
Tako kot v prejšnjem primeru je animacija odvisna od velikosti vnosa, vendar bodite v tem primeru pozorni na višino. Za veliko večino vnosnih polj bo zahtevana vrednost višine vrstice znotraj 100 slikovnih pik. Na žalost lastnosti line-height ni mogoče uporabiti za ustvarjanje učinka premika navzgor, saj lastnost ne sprejema negativnih vrednosti.
.input ( @include placeholder ( text-indent : 0px ; prehod : text-indent 300ms ; ) & :focus ( @include placeholder ( text-indent : 500px ; ) ) )
Skupaj
Da bo uporaba animacijske kode za nadomestne oznake prijetna in priročna, lahko napišete majhno knjižnico mixinov za kateri koli predprocesor. Knjižnica izgleda tako ():
@mixin placeholder ( & : :- webkit-input-placeholder ( @content ) & : - moz-placeholder ( @content ) & : :- moz-placeholder ( @content ) & : - ms-input-placeholder ( @content ) ) @mixin pl-shift ($side: levo, $position: 500px, $duration: 200ms) ( @include placeholder (text-indent: 0; prehod: text-indent $duration;) & :focus ( @include placeholder ( text-indent: if ($side == levo, - $position, $position); ) ) ) @mixin pl-slide-down ($position: 5, $duration: 200ms) ( @include placeholder (line-height: 1; prehod: višina vrstice $trajanje;) & :focus ( @include placeholder (line-height: $position; )) ) @mixin pl-fade-out ($duration: 200ms) ( @include placeholder ( motnost : 1 ; prehod : motnost $trajanje ; ) & :focus ( @include placeholder ( motnost : 0 ; ) ) )Je zelo enostaven za uporabo. Dovolj je, da povežete želeni mixin s poljubnim vnosnim poljem ali preprosto ustvarite eno globalno pravilo za vse nosilce hitrosti na strani:
// Za posamezne elemente.pl-shift-desno ( @include pl-shift ( desno ); ) .pl-fade-out ( @include pl-fade-out ; ) // Za vse ostalo@include pl-shift (levo);Samodejna predpona
Če ne uporabljate predprocesorja in še vedno ne želite, da se vaša izvorna datoteka CSS spremeni v zmešnjavo predpon, ki jo lahko vidijo vsi možni brskalniki, potem bodite pozorni na Autoprefixer. Z njegovo pomočjo čisti CSS lahko naredite umazano (vendar v drugi datoteki) z dodajanjem vseh potrebnih predpon vsem lastnostim. Če želite, da bo vtičnik deloval z ogradami, preprosto uporabite psevdoelement::placeholder:
::placeholder (barva: oranžna;). input::placeholder(barva:modra;)Po razčlenjevanju vaših slogov bo Autoprefixer ustvaril ločeno datoteko CSS, v katero bo zapisal vse potrebne predpone za vse brskalnike, ki ste jih navedli.
Kaj je naslednje
Kot sem zapisal zgoraj, vse, kar je povezano z uporabo slogov za ograde, še ni standardizirano. To bo kmalu popravljeno. Specifikacija Selector Level 4 je dodala psevdorazred: placeholder-shown, ki bo končno standardiziral noro mešanico psevdorazredov in psevdoelementov, ki trenutno obstaja. Podporo lahko spremljate na caniuse (trenutno ni podprto v nobenem brskalniku).
Uporaba slogov z :placeholder-shown bo veliko lažja:
.input :placeholder-shown (barva: modra;)Pozdravljeni, danes ne boste nikogar presenetili z uporabo nadomestnega mesta za vnos. Oznaka mesta je začasno besedilo s primerom znotraj vnosa, ki izgine, ko vnesete besedilo. Danes bomo poskušali napisati slog CSS za ogrado.
Naloga: ustvarite svoj slog CSS za ogrado
Recimo, da imamo elegantno spletno stran, ki pri vnosu uporablja ogrado. Poskrbeti moramo, da bo siv, dolgočasen slog besedila nadomestnega elementa videti skladen s splošnim slogom spletnega mesta. Kako je to mogoče doseči? Takoj bom rekel, da to še ne deluje v vseh brskalnikih. Natančneje, v IE različici 9 in nižjih sploh ne deluje, v 10 in novejših pa še vedno deluje z velikimi težavami. Firefox in brskalniki webkit so druga stvar.
Rešitev: slog css za ogrado
Torej, postavili smo nalogo, kako jo bomo rešili?
Najprej ustvarimo testno poligon:
Končano, zdaj pa poglejmo, kaj lahko naredimo s slogom: webkit in mozilla imata lastne modifikatorje, ki vam omogočajo, da označevalcu mesta dodelite poseben slog: ::-webkit-input-placeholder in:-moz-placeholder. Poglejmo, kako jih uporabiti:
Opišimo slog samega vnosa in besedila v njem (modra barva za kontrast v primeru):
Vnos (širina: 250 slikovnih pik; barva: modra; teža pisave: normalno; slog pisave: običajno; )
Zdaj pa napišimo poseben slog za besedilo nadomestnega mesta v ta vnos za brskalnike Webkit (Chrome, Safari, Opera):
Input::-webkit-input-placeholder( barva: rdeča; slog pisave: poševno; teža pisave: krepko; )
Besedilo nadomestnega mesta naredimo rdeče krepko poševno. Upoštevajte, da je za razliko od drugih psevdorazredov CSS, ki so ločeni z enim dvopičjem, slog za ogrado v webkitu ločen z dvojnim dvopičjem.
Zdaj pa napišimo popolnoma enak slog za Mozilla Firefox brskalniki:
Input:-moz-placeholder(barva: rdeča; slog pisave: poševno; teža pisave: krepko; )
pripravljena Slog CSS za ogrado, seveda lahko napišete katerega koli, ki je bolj primeren za vaš dizajn. Delujočo predstavitev si lahko ogledate na
Če niste seznanjeni z atributom placeholder, potem na kratko razložimo, kaj je in kje se uporablja. Uporablja se v vnosnih poljih obrazca. Atribut prikaže besedilo v vnosnem polju, ki predstavlja vlogo določenega namiga. Prej je bil na našem spletnem mestu primer uporabe javascripta, pozitivna stran ta metoda Združljiv je med brskalniki. Zdaj pa se pogovorimo o oblikovanju atributa placeholder, ki se uporablja pri elementih input in textarea.
Koda vnosnega polja v našem primeru bo videti nekako takole:
Na izhodu dobimo naslednje polje:
Zdaj pa si predstavljajmo, da moramo oblikovati ogrado, za to moramo napisati nabor pravil v CSS:
::-webkit-input-placeholder (barva: #c1c1c1; ) ::-moz-placeholder (barva: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder (barva: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( barva: #c1c1c1; )
Dobimo:
Ne moremo spremeniti vseh lastnosti, vendar je seznam večine, ki jih podpirajo sodobni brskalniki, naveden spodaj:
pisava(tudi povezane lastnosti)
ozadje(tudi povezane lastnosti)
barva
razmik med besedami
razmik med črkami
besedilo-okras
navpično poravnati
preoblikovanje besedila
višina vrstice
zamik besedila
text-overflow
nepreglednost
IN različne brskalnike pravilo zapisano drugače, saj Čeprav ni enotnega standarda, je ta niz zapisov še vedno pomemben. V brskalniku IE, pa tudi v firefoxu pod različico 18, placeholder zaznavamo kot psevdorazred, v novejših pa brskalniki firefox, webkit in blink se obravnavajo kot psevdoelementi.
Skrajšanje besedila v nadomestnem mestu
Včasih so lahko namigi orodij tako dolgi, da se ne morejo popolnoma prilegati v polje za vnos. Za te namene lahko uporabite tudi dodatne lastnosti, ki vam bodo omogočile skrajšanje besedila nadomestnega mesta v vnosnem polju.
Input ( text-overflow:ellipsis; ) input::-moz-placeholder (text-overflow:ellipsis; ) input:-moz-placeholder (text-overflow:ellipsis; ) input:-ms-input-placeholder ( text-overflow :elipsa; )
Kot rezultat dobimo vnosno polje z ogrado, kot je ta:
Skrij besedilo ob kliku na polje
Vsak brskalnik privzeto interpretira odgovor nadomestnega znaka drugače. V nekaterih brskalnikih se skrije takoj, ko kliknete na polje, v drugih pa se skrije, ko je v polju za vnos vsaj en znak. Naj besedilo izgine, ko kliknete na polje, enako v vseh brskalnikih.
:focus::-webkit-input-placeholder (barva: prozorna;) :focus::-moz-placeholder (barva: prozorna;) :focus:-moz-placeholder (barva: prozorna;) :focus:-ms-input -placeholder (barva: prozorna;)
Dobimo to dejanje: