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.
.input1::placeholder (slika ozadja: linearni gradient(limeta, modra); barva: bela; ) .input2::placeholder (besedilo-okras: črta skozi; barva: vijolična; teža pisave: krepko; ) . input3::placeholder (velikost pisave: 16px; razmik med črkami: 10px;) .input4::placeholder (ozadje: rjava; barva: bela; text-overflow: elipsa;)

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