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.