Met behulp van CSS (Cascading Style Sheets) is het mogelijk om de standaard grijze knoppen van een formulier aan te passen aan de kleuren van jouw site.

Bedenk wel dat Cascading Style Sheets worden ondersteund door Microsoft Internet Explorer 3 en hoger, Mozilla, Netscape Navigator 4 en hoger en Opera 3.5 en hoger. We gaan nu eens kijken hoe we dit voor elkaar kunnen krijgen. Wanneer je de HTML-code van een simpel formulier bekijkt dan ziet dat er als volgt uit:

<form action="Een bepaald script" method="post">
    <input type="text"><br><br>
    <input type="submit" value="Verzenden">
    <input type="reset" value="Wissen">
 </form> 

We hebben hier een tekstveld en twee knoppen, namelijk een 'verzend'-en een 'wis'-knop. Dit zijn standaard grijze knoppen met een zwarte tekstkleur. Om dit te veranderen hoef je enkel een 'style' aan de knoppen toe te voegen.

 <form action="Een bepaald script" method="post">
   <input type="text"><br><br>
   <input type="submit" value="Verzenden" style="background-color: red; color: white;font-family: Verdana; font-size: 10 pt; font-weight: bold; border-style: solid; border-color: blue">
   <input type="reset" value="Wissen" style="background-color: green; color: yellow;font-family: Verdana; font-size: 10 pt; font-weight: bold; border-style: solid; border-color: black">
 </form>

De verzendknop heeft nu een rode achtergrondkleur, witte tekstkleur, als lettertype Verdana, 10 pt groot, bold. De rand van de knop is dicht en heeft een blauwe kleur.

De wisknop heeft nu een groene achtergrondkleur, gele tekstkleur, als lettertype Arial, 12 pt groot, bold. De rand van de knop is dicht en heeft een blauwe kleur.

De eigenschappen 'background-color', 'color', 'font-family' en 'font-size' spreken voor zich. Hiermee kun je de kleuren van de achtergrond, de tekstkleur, lettertype en lettergrootte instellen.

Met de 'border-style' eigenschap wordt de stijl van de rand van een element bepaald. In ons geval zijn de elementen de knoppen, maar je zou ook voor het tekstveld een andere rand kunnen kiezen. Mogelijke waarden voor 'border-style' zijn none, dotted, dashed, solid en double. Ook kun je de volgende 3D waarden gebruiken: groove, ridge, inset en outset.

De 'font-weight' eigenschap geeft aan hoe dik of dun je de tekst wilt tonen. Mogelijke waarden voor 'font-weight' zijn normal, bold, bolder, ligther en de getallen 100, 200, 300, 400, 500, 600, 700, 800 en 900 voor een exacte weergave. Het getal 400 komt dan overeen met de waarde normal en het getal 700 met de waarde bold.

Probeer het maar eens uit!

Wil je meer informatie hebben over CSS? Kijk dan eens op http://css.pagina.nl

Succes!