En Form Med Stilade Etiketter
Hur man formaterar en formuläretikett med CSS. Ett formulärelement som används för att märka de olika fälten och inmatningsområdena på ett webbsideformulär är etikettelementet. Det kan stylas med hjälp av Cascading Style Sheet-regler.
Steg 1
För att utforma etikettelementen så som de visas i bilden i introduktionen måste du använda etikettelementet med attributet "for". Dessutom måste du stänga etikettelementet innan du lägger till själva "input"-elementet. HTML-koden för hela formuläret visas i illustrationen.
Dagens video
Steg 2
För att utforma etikettelementen fick jag etiketterna att visas som element på blocknivå, som flöt till vänster. Sedan tilldelade jag etiketterna en bredd så att alla inmatningsfälten skulle vara ett enhetligt avstånd från etiketterna. Jag tilldelade en färg och gjorde texten fet. Jag använde genererat innehåll för att lägga till ett kolon (: ) efter etiketten. (Kolonet kanske inte visas i alla webbläsare.)
Här är CSS: en:
etikett { färg: #B4886B; font-weight: fet; display: block; bredd: 150px; flyta till vänster; } etikett: efter { content: ": " }
Steg 3
Bara för fullständighetens skull kommer jag också att visa dig den CSS som används för att utforma fältuppsättningen, eftersom etikettelementen omges av en kantad fältuppsättning.
Här är den där CSS: en:
fieldset { border: 1px solid #CCA383; bredd: 400px; bakgrund: #FFE8EF; stoppning: 3px; } fieldset legend { bakgrund: #CCA383; stoppning: 6px; font-weight: fet; }
Steg 4
Du kan göra många andra saker för att styla etikettelementen. Mitt exempel är bara ett sätt att göra det.
Formen HTML
Saker du behöver
En praktisk kunskap om HTML
En praktisk kunskap om CSS
