Forma su stilizuotomis etiketėmis
Kaip sukurti formos etiketės stilių naudojant CSS. Formos elementas, naudojamas įvairiems tinklalapio formos laukams ir įvesties sritims pažymėti, yra etiketės elementas. Jis gali būti formuojamas naudojant pakopinio stiliaus lapo taisykles.
1 žingsnis
Norėdami formuoti etiketės elementus taip, kaip jie rodomi įvado paveikslėlyje, turite naudoti etiketės elementą su atributu "for". Be to, prieš pridėdami patį elementą „įvesties“, turite uždaryti etiketės elementą. Pilnos formos HTML kodas parodytas iliustracijoje.
Dienos vaizdo įrašas
2 žingsnis
Norėdami stilizuoti etikečių elementus, etiketes rodžiau kaip bloko lygio elementus, kurie buvo perkelti į kairę. Tada etiketėms priskyriau plotį, kad visi įvesties laukai būtų vienodu atstumu nuo etikečių. Priskyriau spalvą ir paryškinau tekstą. Naudojau sugeneruotą turinį, kad pridėčiau dvitaškį (: ) po etiketės. (Dvitaškis gali būti rodomas ne kiekvienoje naršyklėje.)
Štai CSS:
etiketė { spalva: #B4886B; šrifto svoris: paryškintas; ekranas: blokas; plotis: 150 pikselių; plūdė: kairė; } etiketė: po { content: ": " }
3 veiksmas
Išsamumo sumetimais taip pat parodysiu CSS, naudojamą formuojant lauko rinkinį, nes etiketės elementai yra apsupti laukų rinkinio su apvadu.
Štai tas CSS:
fieldset { border: 1px solid #CCA383; plotis: 400 pikselių; fonas: #FFE8EF; paminkštinimas: 3px; } laukų rinkinio legenda { fonas: #CCA383; pamušalas: 6px; šrifto svoris: paryškintas; }
4 veiksmas
Galite padaryti daug kitų dalykų, kad sukurtumėte etiketės elementus. Mano pavyzdys yra tik vienas iš būdų tai padaryti.
Forma HTML
Daiktai, kurių jums prireiks
Darbo HTML žinios
Darbo CSS žinios
