Obrazac sa stiliziranim oznakama
Kako stilizirati oznaku obrasca pomoću CSS-a. Element obrasca koji se koristi za označavanje različitih polja i područja za unos na obrascu web stranice je element oznake. Može se oblikovati pomoću pravila kaskadnog stilskog lista.
Korak 1
Za stiliziranje elemenata oznake na način na koji se pojavljuju na slici u uvodu, trebate koristiti element oznake s atributom "za". Nadalje, morate zatvoriti element oznake prije dodavanja samog elementa "input". HTML za potpuni obrazac prikazan je na ilustraciji.
Video dana
Korak 2
Kako bih stilizirao elemente naljepnica, napravio sam da se oznake prikazuju kao elementi na razini bloka, koji su lebdjeli ulijevo. Zatim sam naljepnicama dodijelio širinu kako bi sva polja za unos bila ravnomjerno udaljena od oznaka. 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; zaslon: blok; širina: 150px; plutati: lijevo; } oznaka: nakon { content: ": " }
Korak 3
Samo radi potpunosti, također ću vam pokazati CSS koji se koristi za stiliziranje skupa polja, budući da su elementi oznake okruženi obrubljenim skupom polja.
Evo tog CSS-a:
fieldset { border: 1px solid #CCA383; širina: 400px; pozadina: #FFE8EF; padding: 3px; } legenda skupa polja { background: #CCA383; padding: 6px; font-weight: bold; }
4. korak
Možete učiniti mnoge druge stvari za stiliziranje elemenata oznake. Moj primjer je samo jedan od načina da se to učini.
HTML obrazac
Stvari koje će vam trebati
Radno poznavanje HTML-a
Radno poznavanje CSS-a
