Oblikovanje elementa ograde v CSS

ograda je element vnosnega polja, v katerega se lahko namesti namig. Ko uporabnik začne vnašati podatke, pomožno besedilo izgine, da ne moti. Vsak brskalnik ima svojo idejo, kako prikazati ta element, včasih pa privzeti slogi razbijejo celotno obliko. Če jih želite upravljati, morate uporabiti posebno pravilo CSS za ogrado.

Kje je ogrado?

Težava je, da je pozivno polje vnosnega polja varno skrito v senčnem DOM-ju, in priti do njega ni tako enostavno. To uporablja poseben nestandardni psevdoelement CSS :: placeholder. Pomaga vam pri upravljanju lastnosti nasveta.
Stilizacija mesta v CSS izgleda takole:

input :: placeholder {
barva: rdeča;
motnost: 1;
slog pisave: italic;
}

Podpora za brskalnike

Psevdoelement CSS mesta se dobro obravnava v vseh sodobnih brskalnikih in lahko uporabite predpone za podporo starejšim brskalnikom: .googlesyndication.com /pagead /js /adsbygoogle.js "& gt;
& lt ;! - fb_336x280_1 - & gt;

& lt; skript & gt; (adsbygoogle = window.adsbygoogle || []). push ({});

  • :: - webkit-input-placeholder - za spletne brskalnike (Mozilla, 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 lahko vidite, stari Mozilla brskalniki, kot tudi IE, upoštevajo CSS-psevdo-razred namesto psevdo-elementa. Z njimi se ne bomo prepirali, samo razmislite o tem vidiku pri oblikovanju polja za vnos.

Priložnostistyling

Za psevdo-element ograda v CSS, lahko nastavite naslednje parametre:

  • ozadje - skupina lastnosti ozadja. Ozadje bloka pozivov velja za celotno vnosno polje. Določite lahko ne samo barvo (barva ozadja), temveč tudi sliko (ozadje slike).
  • barva besedila - barva;
  • preglednost - motnost;
  • podčrtano, prečrtano ali prečrtano besedilo-dekoracija;
  • register - preoblikovanje besedila;
  • notranji zamiki - oblazinjenje. Ne podpirajo vsi brskalniki. Kot za elementarne elemente se zgornji in spodnji rob zanemarjata.
  • prikaz pisave - lastnosti skupine pisav, višine vrstic in različnih zamikov (tekstovni zamik, razmik med črkami, razmik med besedami);
  • navpična poravnava v črti - navpična poravnava;
  • izrezovanje besedila s prelivom vsebnika - prelivanje besedila.
.input1 :: placeholder {
background-image: linearni gradient (limeta, modra);
barva: bela;
}
.input2 :: ograda {
dekoracija besedila: line-through;
barva: črna;
teža pisave: krepko;
}
.input3 :: ograda {
velikost pisave: 16px;
razmik med črkami: 10 px;
}
.input4 :: placeholder {
ozadje: rjava;
barva: bela;
preliv besedila: elipsa;
}

V žarišču

Privzeto poziv od polja za vnos izgine samo, če ima vnesen vsaj en znak. Vendar pa psevdo-element CSS mesta omogoča, da takoj izginete, ko se osredotočite na polje. Če želite to narediti, jo morate združiti s psevdoklasom: focus.

input: focus :: placeholder {
barva: transparentna;
}

V nekaterih brskalnikih je dovoljeno animirati spremembo številnih lastnosti lastnika mesta z navodili za prenos.

input :: placeholder {
barva: črna;
prehod: barva 1s;
}
input: focus :: placeholder {
color: bela;
}


V brskalniku Google Chrome se bo barva opisa orodja pri osredotočanju na takšno polje gladko spremenila za eno sekundo.

Sorodne publikacije