Obrazec s stiliziranimi oznakami
Kako oblikovati oznako obrazca s CSS. Element obrazca, ki se uporablja za označevanje različnih polj in vnosnih območij na obrazcu spletne strani, je element oznake. Lahko ga oblikujete s pravili kaskadnega slogovnega lista.
Korak 1
Če želite elemente oznake oblikovati tako, kot so prikazani na sliki v uvodu, morate uporabiti element oznake z atributom »za«. Poleg tega morate zapreti element oznake, preden dodate sam element "input". HTML za celoten obrazec je prikazan na sliki.
Video dneva
2. korak
Za oblikovanje elementov nalepk sem nalepke prikazal kot elemente na ravni blokov, ki so bili lebdeni na levi. Nato sem oznakam dodelil širino, tako da bi bila vsa vnosna polja enakomerno oddaljena od nalepk. Dodelil sem barvo in besedilo naredil krepko. Ustvarjeno vsebino sem uporabil za dodajanje dvopičja (: ) za oznako. (Dipač se morda ne pojavi v vsakem brskalniku.)
Tukaj je CSS:
oznaka { barva: #B4886B; teža pisave: krepko; zaslon: blok; širina: 150px; float: levo; } oznaka: po { content: ": " }
3. korak
Zaradi popolnosti vam bom pokazal tudi CSS, ki se uporablja za oblikovanje nabora polj, saj so elementi oznake obdani z obrobljenim naborom polj.
Tukaj je ta CSS:
fieldset { border: 1px solid #CCA383; širina: 400px; ozadje: #FFE8EF; padding: 3px; } legenda nabora polja { ozadje: #CCA383; oblazinjenje: 6px; teža pisave: krepko; }
4. korak
Za oblikovanje elementov etikete lahko naredite še veliko drugih stvari. Moj primer je le eden od načinov za to.
Obrazec HTML
Stvari, ki jih boste potrebovali
Delovno znanje HTML
Delovno znanje CSS
