At lære at style forms med CSS er en fantastisk måde at forbedre udseendet på dit websted. HTML-formularer er uden tvivl blandt de grimeste ting på de fleste websider. De er ofte kedelige og utilitaristiske og tilbyder ikke meget i vejen for stil.
Med CSS kan det ændre sig. Kombination af CSS med de mere avancerede formetiketter kan levere nogle flotte former.
Skift farverne
Ligesom med tekst kan du ændre forgrunds- og baggrundsfarverne på formelementer. En nem måde at ændre baggrundsfarven på næsten alle formelementer på er at bruge baggrundsfarveegenskaben på input-mærket. For eksempel anvender denne kode en blå baggrundsfarve (# 9cf) på alle elementerne.
input { baggrundsfarve: # 9cf; farve: # 000;}
Hvis du vil ændre baggrundsfarven på kun bestemte formelementer, skal du blot tilføje textarea og vælge til stilen. For eksempel:
input, textarea, vælg { baggrundsfarve: # 9cf; farve: # 000;}
Sørg for at ændre tekstfarven, hvis du gør din baggrundsfarve mørk. Kontrastfarver hjælper med at gøre formelementerne mere læselige. For eksempel er tekst på en mørk rød baggrundsfarve meget lettere at læse, hvis tekstfarven er hvid. For eksempel placerer denne kode hvid tekst på en rød baggrund.
input, textarea, vælg { baggrundsfarve: # c00; farve: #fff;}
Du kan endda sætte en baggrundsfarve på selve formularen. Husk, at formularetiketten er et blokelement, så farven fylder hele rektanglet, ikke kun placeringen af elementerne. Du kan tilføje en gul baggrund til et blokelement for at få området til at skille sig ud, sådan:
form { baggrundsfarve: #ffc;}
Tilføj grænser
Som med farver kan du ændre grænserne for forskellige formelementer. Du kan tilføje en enkelt grænse rundt i hele formularen. Sørg for at tilføje polstring, eller dine formelementer bliver fastklemt lige ved siden af grænsen. Her er et eksempel på kode for en 1-pixel sort ramme med 5 pixels polstring:
form { grænse: 1px fast # 000; polstring: 5px;}
Du kan sætte grænser rundt mere end bare selve formularen. Skift grænsen for inputelementerne for at få dem til at skille sig ud:
input { grænse: 2px stiplede # c00;}
Vær forsigtig, når du sætter grænser på inputkasser, da de ser mindre ud som inputkasser, og nogle kan måske ikke indse, at de kan udfylde formularen.
Kombiner stilfunktioner
Ved at sammensætte dine formelementer med tanke og nogle CSS, kan du oprette en flot udseende, der supplerer design og layout af dit websted.
