Att lära sig att utforma formulär med CSS är ett utmärkt sätt att förbättra utseendet på din webbplats. HTML-formulär är förmodligen bland de fulaste sakerna på de flesta webbsidor. De är ofta tråkiga och utilitaristiska och erbjuder inte mycket i form av stil.
Med CSS kan det förändras. Kombinera CSS med de mer avancerade blankettkoderna kan leverera snygga former.
Ändra färgerna
Precis som med text kan du ändra förgrunds- och bakgrundsfärgerna av formelement. Ett enkelt sätt att ändra bakgrundsfärgen på nästan varje formelement är att använda egenskapen bakgrundsfärg på inmatningskoden. Till exempel gäller den här koden en blå bakgrundsfärg (# 9cf) på alla element.
inmatning { bakgrundsfärg: # 9cf; färg: # 000;}
För att ändra bakgrundsfärgen på endast vissa formulärelement, lägg till textarea och välj till stilen. Till exempel:
input, textarea, välj { bakgrundsfärg: # 9cf; färg: # 000;}
Var noga med att ändra textfärgen om du gör din bakgrundsfärg mörk. Kontrastfärger hjälper till att göra formulärelementen mer läsbara. Till exempel kan text på en mörk röd bakgrundsfärg läsas mycket lättare om textfärgen är vit. Till exempel lägger denna kod vit text på en röd bakgrund.
input, textarea, välj { bakgrundsfärg: # c00; färg: #fff;}
Du kan till och med lägga en bakgrundsfärg på själva formuläret. Kom ihåg att formtaggen är ett blockelement, så färgen fyller i hela rektangeln, inte bara placeringen av elementen. Du kan lägga till en gul bakgrund till ett blockelement för att få området att sticka ut, så här:
formulär { bakgrundsfärg: #ffc;}
Lägg till gränser
Som med färger kan du ändra gränserna för olika formelement. Du kan lägga till en enda kant runt hela formuläret. Var noga med att lägga till vaddering, eller dina formulärelement kommer att fastna uppe precis bredvid gränsen. Här är ett exempel på kod för en 1-pixel svart ram med 5 pixlar polstring:
formulär { gränsen: 1px solid # 000; vaddering: 5px;}
Du kan sätta gränser runt mer än bara själva formuläret. Ändra gränsen för de inmatade objekten så att de sticker ut:
inmatning { gräns: 2px streckad # c00;}
Var försiktig när du lägger gränser på inmatningsrutorna eftersom de ser mindre ut som inmatningsrutor då, och vissa människor kanske inte inser att de kan fylla i formuläret.
Kombinera stilfunktioner
Genom att sätta ihop dina formulärelement med tanke och lite CSS kan du skapa en snygg form som kompletterar designen och layouten på din webbplats.
