Vedd be a mezőkészlet stílusát

A HTML mezőkészlet elem nem új, de ebben a részben megmutatom, hogyan lehet CSS3-stílusokkal használni az űrlapmező-elemek új megjelenését, átalakítását, ha akarod! Hozzáadunk egy szegélyt, egy szegély sugarat, háttérgradienst, kitöltést, megjelenítő blokkot, több betűtípust definiálunk, és stílusokat adunk a jelmagyarázathoz. Ennek a demonstrációnak a középpontjában a mezőkészlet mint forma formájának kialakítása áll; az űrlap érvényesítése vagy az űrlap benyújtása nem tartozik az adott darab hatálya alá.

Egy meglehetősen általános űrlappal kezdjük, amely mezőkészlettel, címkével és jelmagyarázattal rendelkezik az alább látható HTML kódrészletben:

Mezõkészlet bemutatása

 Az Ön személyes adatai! 
 Név: 
 Cím: 
 Város (*): Állam (*): Irányítószám: 
 Email: 
 Születési dátum: 
 A demonstrációs index.html fájl, amelyet a Google Chrome 22.0.1229.94 m verziójában néztek meg, az alábbi A ábrán jelenik meg stílus nélkül: 

A ábra

Most kezdjük hozzá néhány stílus hozzáadása a demonstrációhoz azáltal, hogy betűstílust adunk a fejléchez Trebuchet MS, Ariel, Helvetica, 700-as betűsúlyú sans-serif betűtípussal és dőlt betűs betűkészlettel. Az űrlap szélessége 460px, balra úszó; a szegély 2 képpont szélességű, egyszínű kék ​​színű és 10 képpontos szöget sugárol, valamint egy négyzet vízszintes és függőleges eloszlású doboz árnyéka; 5 pixel elmosódás; és az RGBa színbeállítása 50, 50, 50, .75. A webkit és a moz gyártói előtagai szerepelnek a szélső sugár és a doboz árnyékstílusainál. Az alábbiakban a CSS-kódrészlet jelenik meg, a képernyő frissített felvételével együtt, amint azt a B ábrán a 22.0.1229.94 m-es Chrome verzió mutatja:
 h1 { 
 betűtípus-család: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 font-weight: 700; 
 font-style: italic; 
 } 
 .form { 
 szélesség: 450 képpontos; 
 balra lebeg; 
 } 
 .border { 
 szegély: 2xx szilárd # 009; 
 -webkit-border-sugar: 10 képpont; 
 -moz-határ-sugár: 10 képpont; 
 határ-sugár: 10 képpont; 
 -webkit-box-shadow: 4x 4x 5xx rgba (50, 50, 50, 0, 75); 
 -moz-box-shadow: 4x 4x 5xx rgba (50, 50, 50, 0, 75); 
 box-shadow: 4x 4x 5xx rgba (50, 50, 50, 0, 75); 
 } 

B. ábra

Most tisztítsuk meg a címkéinket, a szövegbeviteli mezőket és a jelmagyarázatot: veranda, genfi ​​és sans-serif betűcsaládot és .9em betűmérettel egészítjük ki. Ezenkívül stílusokat is hozzáadunk a címkecímke elemekhez, a kijelző blokkjával a bal oldali 3 pixel margó mentén, a 2 pixel felső párnázatával és a szöveges árnyékhatással. Ezenkívül egy inline blokk képernyőt is hozzáadunk az "Állam" és "Irányítószám" számára. Az alábbiakban található a módosított HTML és CSS kódrészletek, a kapott képernyőfelvétel frissítésével, ahogyan azt a C ábra a 22.0.1229.94 m-es verzióban mutatja:

HTML
 Állam: irányítószám: 
CSS
 Címke, legenda { 
 kijelző: blokk; 
 margó-bal: 3 képpont; 
 padding-top: 2px; 
 szöveg-árnyék: 2 képpont 2 képpont 3 képpont rgba (150, 150, 150, 0, 75); 
 betűtípus-család: Verdana, Genf, sans-serif; 
 font-size: .9em; 
 } 
 .Sorban { 
 display: inline-block; 
 } 
C. ábra

Most adjunk egy gradiens hátteret a mezőkészlethez azáltal, hogy a CSS3-kódot hozzáadjuk a "border" osztályhoz a következő kódrészlettel, beleértve a webkit, a moz, o és ms szállítói előtagjait, valamint az ebből következően frissített képernyőképet a Az alábbi D. ábra :
 háttér: rgb (30, 50, 230); 
 háttér: -moz-lineáris-gradiens (270 ° C, rgb (30, 50, 230) 7%, rgb (90, 140, 250) 99%); 
 háttér: -webkit-lineáris-gradiens (270 ° C, rgb (30, 50, 230) 7%, rgb (90, 140, 250) 99%); 
 háttér: -lineáris-gradiens (270 ° C, rgb (30, 50, 230) 7%, rgb (90, 140, 250) 99%); 
 háttér: m-lineáris-gradiens (270 ° C, rgb (30, 50, 230) 7%, rgb (90, 140, 250) 99%); 
 háttér: lineáris gradiens (270 ° C, rgb (30, 50, 230) 7%, rgb (90, 140, 250) 99%); 
D. ábra

Mint láthatja, módosítanunk kell a jelmagyarázat és a címkeelemek stílusát, hogy jobban kiemelkedjenek a háttérgradienssel. Tehát áthelyezem a jelmagyarázatot a saját stílustulajdonságába, megtartva a szöveg árnyékát és a betűtípuscsaládot, majd a betűméretet 1.4em-re szerkesztve. Hozzáteszem egy 2 képpontos szöget balra, felül és jobbra, ugyanolyan színű, mint a mezőkészlet szegélyét, 10 képpontos szögtartományt, egy doboz-árnyékhatást, és befejezem egy 3 képpontos párnázatot. A módosított CSS kódrészlet, a CSS3 gyártó előtagjai és a frissített képernyő az E. ábrán látható :
 címke { 
 kijelző: blokk; 
 margó-bal: 3 képpont; 
 padding-top: 2px; 
 szöveg-árnyék: 2 képpont 2 képpont 3 képpont rgba (150, 150, 150, 0, 75); 
 betűtípus-család: Verdana, Genf, sans-serif; 
 font-size: .9em; 
 } 
 legenda { 
 szöveg-árnyék: 2 képpont 2 képpont 3 képpont rgba (150, 150, 150, 0, 75); 
 betűtípus-család: Verdana, Genf, sans-serif; 
 font-size: 1.4em; 
 border-top: 2 képpont szilárd # 009; 
 bal-bal: 2 képpont szilárd # 009; 
 jobb-jobb oldal: 2 képpont szilárd # 009; 
 határ-sugár: 10 képpont; 
 -webkit-box-shadow: 4x 4x 5xx rgba (50, 50, 50, 0, 75); 
 -moz-box-shadow: 4x 4x 5xx rgba (50, 50, 50, 0, 75); 
 box-shadow: 4x 4x 5xx rgba (50, 50, 50, 0, 75); 
 párnázat: 3px; 
 } 

E ábra

Ezután hozzá akarok adni egy hátteret és háttérgradienst a legenda számára, csak készítsünk másolatot a háttérkészlethez és a háttérgradiens stílusokhoz, amelyeket a mezőkészlethez definiáltunk, és illessze be őket a legenda tulajdonságstílusaiba. A kódrészlet és a frissített kimenet az F ábrán látható :
 háttér: rgb (30, 50, 230); 
 háttér: -moz-lineáris-gradiens (270 ° C, rgb (30, 50, 230) 7%, rgb (90, 140, 250) 99%); 
 háttér: -webkit-lineáris-gradiens (270 ° C, rgb (30, 50, 230) 7%, rgb (90, 140, 250) 99%); 
 háttér: -lineáris-gradiens (270 ° C, rgb (30, 50, 230) 7%, rgb (90, 140, 250) 99%); 
 háttér: m-lineáris-gradiens (270 ° C, rgb (30, 50, 230) 7%, rgb (90, 140, 250) 99%); 
 háttér: lineáris gradiens (270 ° C, rgb (30, 50, 230) 7%, rgb (90, 140, 250) 99%); 

F ábra

Tegyük fel ezt a demonstrációt egy autofókusz-attribútummal a "Név" beviteli szövegmezőhöz és mindegyik helyőrzőjéhez, amint az alább és a G ábrán látható HTML-kódrészlettel és képernyőképezéssel látható:

Név:

Cím:

Város (*): Állam (*): Irányítószám:

Email:

Születési dátum:

G ábra

Az itt bemutatott HTML és CSS fájlok letölthetők.

© Copyright 2021 | mobilegn.com