Leren hoe je vormen vorm te geven met CSS is een geweldige manier om het uiterlijk van je website te verbeteren. HTML-formulieren zijn misschien wel de lelijkste dingen op de meeste webpagina's. Ze zijn vaak saai en utilitair en bieden niet veel stijl.
Met CSS kan dat veranderen. Het combineren van CSS met de meer geavanceerde formulierlabels kan een aantal fraai ogende vormen opleveren.
Verander de kleuren
Net als bij tekst kunt u de voorgrond- en achtergrondkleuren van formulierelementen wijzigen. Een eenvoudige manier om de achtergrondkleur van bijna elk formulierelement te wijzigen, is door de eigenschap background-colour op de invoertag te gebruiken. Deze code past bijvoorbeeld een blauwe achtergrondkleur (# 9cf) toe op alle elementen.
invoer { achtergrondkleur: # 9cf; kleur: # 000;}
Als u de achtergrondkleur van alleen bepaalde formulierelementen wilt wijzigen, voegt u gewoon tekstveld toe en selecteert u de stijl. Bijvoorbeeld:
invoer, tekstveld, selecteer { achtergrondkleur: # 9cf; kleur: # 000;}
Zorg ervoor dat u de tekstkleur wijzigt als u uw achtergrondkleur donker maakt. Contrasterende kleuren helpen de formulierelementen beter leesbaar te maken. Tekst op een donkerrode achtergrondkleur kan bijvoorbeeld veel gemakkelijker worden gelezen als de tekstkleur wit is. Deze code plaatst bijvoorbeeld witte tekst op een rode achtergrond.
invoer, tekstveld, selecteer { achtergrondkleur: # c00; kleur: #fff;}
U kunt zelfs een achtergrondkleur op de formuletag zelf zetten. Vergeet niet dat de formuliertag een blokelement is, dus vult de kleur de hele rechthoek in, niet alleen de locaties van de elementen. Je kunt een gele achtergrond toevoegen aan een blokelement om het gebied op te laten vallen, zoals dit:
het formulier { achtergrondkleur: #ffc;}
Randen toevoegen
Net als bij kleuren kunt u de randen van verschillende formulierelementen wijzigen. U kunt één rand rond het hele formulier toevoegen. Zorg dat u opvulling toevoegt of dat uw formulierelementen direct naast de rand worden vastgelopen. Hier is een voorbeeld van code voor een zwarte rand van 1 pixel met 5 pixels opvulling:
het formulier { grens: 1px vast # 000; opvulling: 5px;}
Je kunt grenzen rondom meer plaatsen dan alleen de vorm zelf. Wijzig de rand van de invoeritems om ze te laten opvallen:
invoer { rand: 2px gestreept # c00;}
Wees voorzichtig als je randen op invoervakken plaatst, omdat ze er dan minder als invoervakken uitzien en sommige mensen realiseren zich misschien niet dat ze het formulier kunnen invullen.
Combineer stijlfuncties
Door uw formulierelementen samen te stellen met behulp van gedachte en een aantal CSS, kunt u een mooi ogend formulier opstellen dat aansluit bij het ontwerp en de lay-out van uw site.
