Kako stilizirati oznaku obrasca pomoću CSS-a

Kako stilizirati oznaku obrasca pomoću CSS-a. Element obrasca koji se koristi za označavanje različitih polja i područja unosa na obrascu web stranice je element label. Može se oblikovati pomoću pravila Cascading Style Sheet.

1. korak

Da biste stilizirali elemente oznake onako kako se pojavljuju na slici u uvodu, morate koristiti element oznake s atributom "za". Nadalje, trebate zatvoriti element oznake prije dodavanja samog elementa "input". HTML za cijeli obrazac prikazan je na ilustraciji.

2. korak

Kako bih stilizirao elemente oznake, napravio sam da se oznake prikazuju kao elementi na razini bloka, koji su plutali ulijevo. Zatim sam naljepnicama dodijelio širinu tako da sva polja za unos budu jednako udaljena od naljepnica. Dodijelio sam boju i podebljao tekst. Koristio sam generirani sadržaj za dodavanje dvotočke (:) nakon oznake. (Dvotočka se možda neće pojaviti u svakom pregledniku.)

Evo CSS-a:

oznaka { boja:#B4886B; font-weight:bold; prikaz:blok; širina:150px; plovak:lijevo; } label:after { content:":" }

3. korak

Samo radi cjelovitosti također ću vam pokazati CSS korišten za stiliziranje skupa polja, budući da su elementi oznake okruženi skupom obrubljenih polja.

Evo tog CSS-a:

fieldset { border:1px solid #CCA383; širina:400px; pozadina:#FFE8EF; ispuna:3px; } legenda skupa polja { pozadina:#CCA383; ispuna:6px; font-weight:bold; }

4. korak

Možete učiniti mnogo drugih stvari za stiliziranje elemenata naljepnice. Moj primjer samo je jedan od načina da to učinite.