Zástupný znak dizajnu css.

Hľadať

Pracujte v systéme

Atribút zástupného symbolu je nastavený tak, aby sa volal uprostred prázdnych prvkov input a textarea.

No, začnime zadkom pre tých, ktorí nevedia, čo je zástupný symbol.

html

Štýl zástupného symbolu je možné zmeniť pomocou nasledujúcej sady pravidiel CSS:

css

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

Vyzerá to strašidelne, však?

• Vpravo je to, čo v normách chýba.
• Prehliadač vzhľadu implementuje štylizáciu zástupného symbolu vlastným spôsobom.
• V IE a staršom firefoxe (pred 18) je zástupný symbol pseudotrieda a v novom firefox, webkit a blink - pseudoprvky.
• žasnem nad tým, čo sa stalo:
• Treba povedať, že nie všetky možné css autority sú podporované.
• Väčšina súčasných prehliadačov vám umožňuje zmeniť:
• písmo (a súvisiace autority)
• pozadie (a súvisiace právomoci)
• farba
• medzery medzi slovami
• medzi písmenami
• text-dekorácia

vertikálne zarovnať

textová transformácia

html

zarážka textu

text-overflow

1. nepriehľadnosť
2. Čo ak sa zástupný symbol nezmestí?

Niektoré polia na zadávanie textu sú prispôsobené na šírku kvôli zvláštnostiam rozloženia, najmä na mobilných zariadeniach.

html

Zástupný symbol je krásny

Môžete tiež pridať prechod pre vzhľad a umiestnenie zástupného symbolu-a:

html

prechod: text-odsadenie 0,3 s ľahkosť;) .input2: zameranie :: - webkit-input-placeholder (text-odsadenie: 500px; prechod: text-odsadenie 0,3 s ľahkosť;).input2: focus :: - moz-placeholder ( zarážka textu: 500px; prechod: odsadenie textu 0,3 s ľahkosť;).vstup2: zameranie: -moz-placeholder (odsadenie textu: 500px; prechod: odsadenie textu 0,3 s ľahkosť;).vstup2: zameranie: -ms- input-placeholder (text-odsadenie: 500px; prechod: text-odsadenie 0,3 s ľahkosť;) / * zbaliť zástupný symbol nadol pri zameraní * / .input3 :: - webkit-input-placeholder (line-height: 20px; transition: line -výška 0,5 s ľahkosť;).input3 :: - moz-placeholder (výška riadku: 20px; prechod: výška riadku 0,5s ľahkosť;).input3: -moz-placeholder (výška riadku: 20px; prechod: riadok - výška 0,5 s ľahkosť;).input3: -ms-input-placeholder (výška riadka: 20px; prechod: výška riadku 0,5s ľahkosť;).input3: focus :: - webkit-input-placeholder (výška riadku: 100px ; prechod: výška riadku 0,5 s ľahkosť;) .input3: zameranie :: - moz-placeholder (výška riadku: 100px; prechod: výška riadku 0,5 s ľahkosť;) .input3: zameranie: -moz-placehold er ( riadok -výška: 100px;

Zástupný symbol je prvok vstupného poľa, do ktorého možno umiestniť nápovedu.

Keď zákazník začne zadávať údaje, doplnkový text zmizne, aby ho nebolo možné prehliadnuť.

Každý prehliadač má svoju myseľ nastavenú na zobrazovanie tohto prvku a niekedy predvolené štýly zničia celý dizajn.

Aby ste ich zvládli, musíte použiť špeciálne pravidlo pre zástupný symbol CSS.

Kde je zástupný symbol?

Problém je v tom, že popis vstupného poľa je bezpečne uložený v tieňovom DOM a dostať sa k nemu nie je také jednoduché.

Pre ktorý existuje špeciálny neštandardný zástupný symbol ::.

• Pomocou tejto pomoci môžete spravovať právomoci výzvy.
• Štýl zástupného symbolu v CSS vyzerá takto:
• Input::placeholder (farba: červená; nepriehľadnosť: 1; štýl písma: kurzíva;)
• Podpora prehliadača

Pseudoprvok zástupného symbolu CSS je dobre spracovaný všetkými modernými prehliadačmi a na podporu starších prehliadačov môžete rýchlo použiť predpony:

:: - zástupný symbol webkitu - pre prehliadače webkitu (Safari, Chrome, Opera);

:: - moz-placeholder - pre prehliadače Firefox vyššie ako verzia 19;

• : -Moz-placeholder - pre starší Firefox;
• : -Ms-input-placeholder - pre Internet Explorer nad verziou 10.
• Zdá sa, že staršie prehliadače Mozilla, ako aj IE, rešpektujú zástupnú pseudotriedu CSS, nie pseudoprvky.
• Nebudeme sa s nimi hádať, len vezmeme na vedomie tento aspekt pri úprave vstupného poľa.
• Možnosť štylizácie
• Pre zástupný pseudoelement v CSS môžete nastaviť nasledujúce parametre:
• pozadie - skupina nápovedného bloku sa rozšíri na celé vstupné pole.
• Môžete zadať nielen farbu (farba pozadia), ale aj obrázok (obrázok pozadia).
• farba textu - farba;

podstolička, nadkreslo alebo nadkreslo - text-dekorácia;

Po dokončení výzva zmizne zo vstupného poľa iba v prípade, že chcete v novom zázname jeden znak.

Zástupný symbol umožňuje implementovať rovnaký efekt pri zaostrení na pole.

Na tento účel je potrebné kombinovať ju s pseudotriedou: focus.

Vstup: focus::placeholder(color: transparent;)

V niektorých prehliadačoch je možné vyhnúť sa zmene množstva zástupných ovládacích prvkov pomocou dodatočnej inštrukcie na prechod.

Vstup :: zástupný symbol (farba: čierna; prechod: farba 1 s;) vstup: zameranie :: zástupný znak (farba: biela;)

V prehliadači Google Chrome sa farebný náznak pri zaostrení na takéto pole plynule zmení v priebehu jednej sekundy.
Zástupný symbol je pseudotrieda alebo pseudoprvok, ktorý predstavuje zobrazenie názvu poľa.

Pre vašu hračku suttu tse visačku (pre jednoduchosť to tak nazvime), do ktorej zadáte slovo a do stredu koristuvach bach yogo.

• Je to podobné ako tipy alebo názvy pre pole tvaru pokožky.
• Každý prehliadač si tento tag zbiera po svojom a jeho dizajnové štýly sú zbavené krásy.
• Ak chcete zmeniť štýly v zákulisí, stačí pridať pár riadkov kódu do súboru štýlov.
• Nie je tam nič skladateľné.
• Je pravda, že je potrebné veriť, že nie všetko sa dá zapamätať.
• Uprostred tejto širokej škály štýlov máme v tomto období k dispozícii tieto prejavy:
• font-weight - nastavenie hmotnosti textu
• font-size - vyberte veľkosť textu
• font-family - vyberte písmo
• pozadie - obrázky pozadia a pozadia
• farba - farba textu
• word-spacing - nastavenie medzier medzi slovami
• letter-spacing - nastavenie medzier medzi písmenami
• text-decoration - výber textovej dekorácie.

Kreslá, stoličky atď.

vertical-align - nastavenie vertikálneho zarovnania
text-transform - vyberte zmeniť text.
Všetci veľkí aj malí spisovatelia atď.
line-height - interval medzi riadkami

text-indent - vloží ľavú zarážku na prvý riadok odseku
text-overflow - vyberte zobrazenie textu, ktorý sa nezmestí do bloku (pridajte alebo orežte a pridajte tri bodky)

:: - webkit-input-placeholder (farba: #2cb04d; font-size: 1,5em; font-weight: 600;)
::- moz-placeholder (color: #2cb04d; font-size: 1.5em; font-weight: 600;) / * Firefox 19 + * /
: -Moz-placeholder (farba: #2cb04d; font-size: 1,5em; font-weight: 600;) / * Firefox 18 - * /
: -Ms-input-placeholder (farba: #2cb04d; font-size: 1,5em; font-weight: 600;)

Pridajte farbu, veľkú veľkosť a strednú váhu textu.
Ako pridať dodatočnú energiu -

text-overflow: elipsa, potom bude text skrátený nad veľkosť poľa a na koniec budú pridané tri bodky.

Ešte jedna dôležitá vec je, že akonáhle sa animácie objavia v CSS (štýloch), môžete si prispôsobiť spôsob, akým sa použijú, keď umiestnite kurzor do poľa.
Predtým to fungovalo pomocou js (script)
Vstup :: - zástupný symbol vstupu webkitu (nepriehľadnosť: 1; prechod: nepriehľadnosť 0,3 s ľahkosť;)
.input :: - moz-placeholder (nepriehľadnosť: 1; prechod: nepriehľadnosť 0,3 s ľahkosť;)
.input: -moz-placeholder (nepriehľadnosť: 1; prechod: nepriehľadnosť 0,3 s ľahkosť;)
.input: -ms-input-placeholder (nepriehľadnosť: 1; prechod: nepriehľadnosť 0,3 s ľahkosť;)
.input: focus :: - webkit-input-placeholder (nepriehľadnosť: 0; prechod: nepriehľadnosť 0,3 s ľahkosť;)
.input: focus :: - moz-placeholder (nepriehľadnosť: 0; prechod: nepriehľadnosť 0,3 s ľahkosť;)

.input: focus: -moz-placeholder (nepriehľadnosť: 0; prechod: nepriehľadnosť 0,3 s ľahkosť;)
.input: focus: -ms-input-placeholder (nepriehľadnosť: 0; prechod: nepriehľadnosť 0,3 s ľahkosť;)

.input je trieda prvku formulára.

Aby bolo možné definovať štýly, kód poľa formulára by mal vyzerať takto:
im
Alebo si môžete vybrať triedu prvku.
Týmto spôsobom môžete nastaviť rôzne štýly pre tvar pokožky.

.contacts-form form input:: - webkit-input-placeholder (farba: #2cb04d; font-size: 1.5em; font-weight: 600;)

Vstup formulára .contacts-form::- moz-placeholder (farba: #2cb04d; font-size: 1.5em; font-weight: 600;) / * Firefox 19 + * /

Tiež farbu textu nášho zástupného symbolu je možné zmeniť pomocou nasledujúceho súboru pravidiel CSS:

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

Množstvo kódu na štylizáciu takejto jednoduchej sily je spôsobené absenciou právneho štandardu, kvôli ktorému prehliadač vlastným spôsobom implementuje štylizáciu zástupného symbolu.

Okrem toho nie sú podporované všetky autority CSS.

Os perelik je presne podporovaná úradmi:
písmo (a pletené)
pozadie (a pletené)
farba
medzery medzi slovami
medzi písmenami
text-dekorácia
vertikálne zarovnať
textová transformácia
výška riadku
zarážka textu
text-dekorácia

text-overflow

Stáva sa tiež, že zástupný text „presahuje“ šírku prvku input alebo textarea (súčasť rozloženia pre mobilné zariadenia).

Vďaka tomu sa vlasy automaticky nevzhľadne ostrihajú.

CSS-power nám pomôže napraviť túto nekonzistentnosť, napríklad text-overflow: ellipsis, ktorý do orezaného zástupného symbolu pridá esteticky príjemnú elipsu.

V štýloch je os napísaná takto:

input [placeholder] (text-overflow: elipsa;) input :: - moz-placeholder (text-overflow: ellipsis;) input: -moz-placeholder (text-overflow: elipsa;) input: -ms-input-placeholder ( text-overflow: elipsa ;) Aby sme našim zástupným symbolom dodali ešte väčšiu estetiku, je možné pridať efekt príťažlivosti, keď sa odstráni ohnisko hlavného prvku. Niekoľko zadkov tohto druhu s prvkami animácie:.input :: - webkit-input-placeholder (text-odsadenie: 0px; prechod: text-odsadenie 0,3 s ľahkosť;) .input :: - moz-placeholder (text-odsadenie: 0px; prechod: text-odsadenie 0,3 s ľahkosť;) ;).input: -moz-placeholder (text-odsadenie: 0px; prechod: text-odsadenie 0,3 s ľahkosť;).input: -ms-input-placeholder (text-odsadenie: 0px; prechod: text-odsadenie 0,3 s ľahkosť ;).vstup : Focus :: - webkit-input-placeholder(Odsadenie textu: 500px; prechod: odsadenie textu 0,3 s ľahkosť;).input: focus :: - moz-placeholder (odsadenie textu: 500px; prechod: odsadenie textu 0,3 s ľahkosť;).input: focus: - moz-placeholder (text-odsadenie: 500px; prechod: text-odsadenie 0,3 s ľahkosť;).input: focus: -ms-input-placeholder (text-odsadenie: 500px; prechod: text-odsadenie 0,3 s ľahkosť;) / * Rozbite zástupný symbol pri zaostrení * /.input :: - webkit-input-placeholder (výška riadku: 20px; prechod: výška riadka 0,5 s ľahkosť;) .input :: - moz-placeholder (výška riadku: 20px; prechod: výška riadka 0,5 s ľahkosť;) ;).input: -moz-placeholder (line-height: 20px; transition: line-height 0,5s easy;).input: -ms-input-placeholder (line-height: 20px; transition: line-height 0.5s easy;). ;).vstup : Focus :: - webkit-input-placeholder(Výška riadka: 100px; prechod: výška riadku 0,5 s ľahkosť;).input: focus :: - moz-placeholder (výška riadku: 100px; prechod: výška riadku 0,5 s ľahkosť;).vstup: zaostrenie: - moz-placeholder (line-height: 100px; transition: line-height 0,5s easy;).input: focus: -ms-input-placeholder (line-height: 100px; transition: line-height 0,5s easy;)

kde skončíme?

Zástupné symboly, tie často sivé textové prvky vo vstupe, môžu byť náročné na štýl.

Našťastie sme „získali krátke, ale efektívne riešenie CSS na štýl vášho vstupu“ s ľubovoľnou farbou a nepriehľadnosťou.

Prečítajte si kód.

Zmena farby zástupného textu

Základné HTML je nižšie:

HTML

Všimnite si, že je dôležité zahrnúť predpony rôznych dodávateľov, aby sa podporilo čo najviac prehliadačov. Len vstupný zástupný text prehliadača Firefox má predvolenú miernu priehľadnosť, takže nie je potrebné nastavovať vlastnosť nepriehľadnosti v prehliadači IE alebo Chrome.

Zmena farby textu zamerania zástupného symbolu

Dobre, úspešne sme zmenili farbu zástupného textu na červenú, ale bolo by pekné, keby sa niečo stalo, keď používateľ klikne do nášho vstupu. Pomocou rovnakých vlastností CSS s predponou od dodávateľa môžeme zmeniť nepriehľadnosť vstupného zástupného textu na zameranie.

HTML

Vo vyššie uvedenom príklade sme pridali niekoľko základných štýlov na samotný vstup a pridali sme prechod na nepriehľadnosť, aby bol zážitok o niečo krajší. Pozrite si demo a experimentujte s ďalšími vlastnosťami a prechodmi CSS.