En formular med stylede etiketter
Sådan styles en formularlabel med CSS. Et formularelement, der bruges til at mærke de forskellige felter og inputområder på en websideformular, er etiketelementet. Det kan styles ved hjælp af Cascading Style Sheet-regler.
Trin 1
For at style etiketelementerne, som de vises på billedet i introduktionen, skal du bruge etiketelementet med attributten "for". Desuden skal du lukke etiketelementet, før du tilføjer selve "input"-elementet. HTML for den komplette formular er vist i illustrationen.
Dagens video
Trin 2
For at style etiketelementerne fik jeg etiketterne til at blive vist som blokniveauelementer, som blev svævet til venstre. Derefter tildelte jeg en bredde til etiketterne, så indtastningsfelterne alle ville være ensartet afstand fra etiketterne. Jeg tildelte en farve og gjorde teksten fed. Jeg brugte genereret indhold til at tilføje et kolon (: ) efter etiketten. (Kolonet vises muligvis ikke i alle browsere.)
Her er CSS'en:
etiket { farve: #B4886B; font-weight: fed; display: blok; bredde: 150px; flyde: venstre; } etiket: efter { content: ": " }
Trin 3
For fuldstændighedens skyld vil jeg også vise dig den CSS, der bruges til at style feltsættet, da etiketelementerne er omgivet af et feltsæt med kant.
Her er den CSS:
fieldset { border: 1px solid #CCA383; bredde: 400px; baggrund: #FFE8EF; polstring: 3px; } feltsætforklaring { baggrund: #CCA383; polstring: 6px; font-weight: fed; }
Trin 4
Du kan gøre mange andre ting for at style etiketelementerne. Mit eksempel er kun én måde at gøre det på.
Formular HTML
Ting du skal bruge
Et praktisk kendskab til HTML
Et praktisk kendskab til CSS
