Hvordan å style en fieldset og Legend Med CSS

Hvordan å style en fieldset og Legend Med CSS


En form element som vil hjelpe deg å organisere og klargjøre en form er den fieldset element. Et skjema kan inneholde mer enn én fieldset. For eksempel kan det være en fieldset som inneholder skjemaelementer for brukerens personlige informasjon: navn, e-post og andre detaljer. En annen fieldset kan samle informasjon om et spørsmål, et produkt eller en tjeneste. Avhengig av formålet med skjemaet, kan feltsett bidra til å bryte den opp i meningsfulle biter og visuelt forskjellige områder. Denne artikkelen vil lære deg hvordan å style en fieldset og legende.

Bruksanvisning

1 Hvordan å style en fieldset og Legend Med CSS

Opprett fieldset vist i innledningen med tilhørende HTML.

2 Se på de ulike elementene i form. Disse elementene kan bli stylet: fieldset, legende, p, etikett, inngang. P elementene er ikke nødvendig; eksempelet kunne bruke br eller div i stedet, og i de fleste former på send-knappen vil ikke være en del av et fieldset, spesielt hvis formen hadde mer enn én fieldset, som er et svært sannsynlig scenario.

3 Enhver regel av CSS kan brukes på noen eller alle av de skjemaelementer tilstede. Du kan skrive regler for skrifttyper, farger, bakgrunn, bakgrunnsbilde, linjeavstand, padding, margin, border eller noe annet du kanskje ønsker å presentere på en bestemt måte.

4 Dette er CSS-reglene jeg skrev å style fieldset og legende. Du kan gjøre dette mange andre måter. Min vei er ikke den eneste måten.

fieldset {
border: 1px solid # CCA383;
width: 50%;
bakgrunn: # FFE8EF;
padding: 3px;
}
fieldset legende {
bakgrunn: # CCA383;
padding: 6px;
font-weight: bold;
}

5 Noen enkle elementer med CSS involverer farge, padding og border gjør legenden skille seg ut og visuelt fremheve formen på siden.