Az űrlapcímke stílusának kialakítása CSS-sel

Űrlapcímke stílusa CSS-sel. Egy űrlapelem, amely a weboldal űrlapjának különböző mezőinek és beviteli területeinek címkézésére szolgál, a címkeelem. Stílusozható a lépcsőzetes stíluslapszabályokkal.

1. lépés

Ahhoz, hogy a címkeelemeket úgy alakítsa ki, ahogyan a bevezető képén megjelennek, a címkeelemet a "for" attribútummal kell használni. Ezenkívül be kell zárnia a címkeelemet, mielőtt hozzáadná magát az "input" elemet. Az ábrán látható teljes űrlap HTML-kódja.

2. lépés

A címkeelemek stílusához a címkéket blokkszintű elemekként jelenítettem meg, amelyeket balra úsztattam. Ezután szélességet rendeltem a címkéknek, hogy a beviteli mezők egyenletes távolságra legyenek a címkéktől. Hozzárendeltem egy színt, és félkövérré tettem a szöveget. Generált tartalommal kettőspontot ( :) tettem a címke után. (A kettőspont nem minden böngészőben jelenik meg.)

Íme a CSS:

címke { szín:#B4886B; betűsúly:félkövér; kijelző:blokk; szélesség:150 képpont; balra lebeg; } label:after { content:":" }

3. lépés

A teljesség kedvéért megmutatom a mezőkészlet stílusozásához használt CSS-t is, mivel a címkeelemeket egy szegélyezett mezőkészlet zárja be.

Íme a CSS:

fieldset { border:1px solid #CCA383; szélesség:400 képpont; háttér:#FFE8EF; padding:3px; } mezőkészlet jelmagyarázata { háttér:#CCA383; padding:6px; betűsúly:félkövér; }

4. lépés

A címkeelemek stílusához sok más dolgot is megtehet. Példám csak egy módja annak.